From 5e7444705656cbedaa45d3bec357d532835c2628 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Thu, 5 Jun 2025 12:23:02 +0800
Subject: [PATCH] Tambahan UI di menu ligkungan

---
 .../inovasi/ajukan-ide-inovatif/page.tsx      |  2 +-
 .../data-lingkungan-desa/create/page.tsx      | 22 ++---
 .../data-lingkungan-desa/detail/page.tsx      | 66 +++++++++++++
 .../data-lingkungan-desa/edit/page.tsx        | 73 +++++++++++++++
 .../lingkungan/data-lingkungan-desa/page.tsx  | 11 ++-
 .../edukasi-lingkungan/create/page.tsx        | 12 +--
 .../edukasi-lingkungan/detail/page.tsx        | 62 +++++++++++++
 .../edukasi-lingkungan/edit/page.tsx          | 61 ++++++++++++
 .../lingkungan/edukasi-lingkungan/page.tsx    | 11 ++-
 .../lingkungan/gotong-royong/create/page.tsx  | 23 +++--
 .../lingkungan/gotong-royong/detail/page.tsx  | 66 +++++++++++++
 .../lingkungan/gotong-royong/edit/page.tsx    | 68 ++++++++++++++
 .../lingkungan/gotong-royong/page.tsx         | 11 ++-
 .../konservasi-adat-bali/create/page.tsx      | 25 +++--
 .../konservasi-adat-bali/detail/page.tsx      | 57 ++++++++++++
 .../konservasi-adat-bali/edit/page.tsx        | 59 ++++++++++++
 .../lingkungan/konservasi-adat-bali/page.tsx  | 24 +++--
 .../create/page.tsx                           | 71 --------------
 .../create/page.tsx                           | 46 ++++++++++
 .../detail/page.tsx                           | 62 +++++++++++++
 .../edit/page.tsx                             | 46 ++++++++++
 .../keterangan_bank_sampah_terdekat/page.tsx  | 55 +++++++++++
 .../create/page.tsx                           | 46 ++++++++++
 .../detail/page.tsx                           | 61 ++++++++++++
 .../edit/page.tsx                             | 46 ++++++++++
 .../page.tsx}                                 | 43 ++++-----
 .../pengelolaan-sampah-bank-sampah/page.tsx   | 13 ++-
 .../program-penghijauan/create/page.tsx       | 92 ++++++++-----------
 .../program-penghijauan/detail/page.tsx       | 62 +++++++++++++
 .../program-penghijauan/edit/page.tsx         | 53 +++++++++++
 .../lingkungan/program-penghijauan/page.tsx   | 14 +--
 31 files changed, 1130 insertions(+), 233 deletions(-)
 create mode 100644 src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/gotong-royong/edit/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/edit/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit/page.tsx
 rename src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/{ui/list_page/listPage.tsx => list_pengelolaan_sampah_bank_sampah/page.tsx} (60%)
 create mode 100644 src/app/admin/(dashboard)/lingkungan/program-penghijauan/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/lingkungan/program-penghijauan/edit/page.tsx

diff --git a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx b/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
index fa50fbcf..15c2392a 100644
--- a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
@@ -19,7 +19,7 @@ function AjukanIdeInofativ() {
 
 function ListAjukanIdeInovatif() {
   return (
-    <Box py={5}>
+    <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>List Ajukan Ide Inovatif</Title>
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
index 88e6e01a..069e862f 100644
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
@@ -4,6 +4,7 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
 function CreateDataLingkunganDesa() {
   const router = useRouter()
@@ -19,10 +20,13 @@ function CreateDataLingkunganDesa() {
         <Stack gap="xs">
           <Title order={3}>Create Data Lingkungan Desa</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jumlah</Text>}
+            placeholder="masukkan jumlah"
           />
-
           <TextInput
             label={<Text fz="sm" fw="bold">Deskripsi</Text>}
             placeholder="masukkan deskripsi"
@@ -51,15 +55,11 @@ function CreateDataLingkunganDesa() {
                             <IconImageInPicture />
                         </Center>
                     )} */}
-
           <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            {/* <CreateEditor
-                            value={potensiState.create.form.content}
-                            onChange={(htmlContent) => {
-                                potensiState.create.form.content = htmlContent;
-                            }}
-                        /> */}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
           </Box>
           <Button bg={colors['blue-button']} >
             Simpan Data
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx
new file mode 100644
index 00000000..7b7ded58
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx
@@ -0,0 +1,66 @@
+'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 DetailDataLingkunganDesa() {
+  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 Data Lingkungan Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</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"}>Jumlah</Text>
+                <Text fz={"lg"}>Test Jumlah</Text>
+              </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/data-lingkungan-desa/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 DetailDataLingkunganDesa;
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx
new file mode 100644
index 00000000..310c62d7
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx
@@ -0,0 +1,73 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function EditDataLingkunganDesa() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Data Lingkungan Desa</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          {/* <FileInput
+                        label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+                        value={file}
+                        onChange={async (e) => {
+                            if (!e) return;
+                            setFile(e);
+                            const base64 = await e.arrayBuffer().then((buf) =>
+                                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+                            );
+                            setPreviewImage(base64);
+                        }}
+                    /> */}
+
+          {/* {previewImage ? (
+                        <Image alt="" src={previewImage} w={200} h={200} />
+                    ) : (
+                        <Center w={200} h={200} bg="gray">
+                            <IconImageInPicture />
+                        </Center>
+                    )} */}
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan Data
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDataLingkunganDesa;
diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
index d9ba4dfc..bb62b62a 100644
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
@@ -1,9 +1,11 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
 import HeaderSearch from '../../_com/header';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function DataLingkunganDesa() {
   return (
@@ -19,6 +21,7 @@ function DataLingkunganDesa() {
 }
 
 function ListDataLingkunganDesa() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p="md">
@@ -31,7 +34,7 @@ function ListDataLingkunganDesa() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Nama Data Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
                   <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
@@ -41,15 +44,15 @@ function ListDataLingkunganDesa() {
                 <TableTr>
                   <TableTd>
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                      <Text truncate="end" fz={"sm"}>Lingkungan Desa</Text>
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Image w={100}  alt="image" />
+                    <Image w={100} src={"/"}  alt="image" />
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx
index df1978c0..e4f01858 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx
@@ -5,7 +5,7 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
-function Page() {
+function CreateEdukasiLingkungan() {
   const router = useRouter()
   return (
     <Box>
@@ -19,12 +19,12 @@ function Page() {
         <Stack gap="xs">
           <Title order={3}>Create Edukasi Lingkungan</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Judul Edukasi Lingkungan</Text>}
+            placeholder="masukkan judul edukasi lingkungan"
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={<Text fz="sm" fw="bold">Deskripsi Edukasi Lingkungan</Text>}
+            placeholder="masukkan deskripsi edukasi lingkungan"
           />
           {/* <FileInput
           label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
@@ -58,4 +58,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default CreateEdukasiLingkungan;
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx
new file mode 100644
index 00000000..4eb6f96d
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx
@@ -0,0 +1,62 @@
+'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 DetailEdukasiLingkungan() {
+  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 Edukasi Lingkungan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Edukasi Lingkungan</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 Edukasi Lingkungan</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/edukasi-lingkungan/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 DetailEdukasiLingkungan;
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx
new file mode 100644
index 00000000..ca48b81a
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx
@@ -0,0 +1,61 @@
+'use client'
+import React from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function EditEdukasiLingkungan() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Edukasi Lingkungan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Edukasi Lingkungan</Text>}
+            placeholder="masukkan judul edukasi lingkungan"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi Edukasi Lingkungan</Text>}
+            placeholder="masukkan deskripsi edukasi lingkungan"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+          value={file}
+          onChange={async (e) => {
+            if (!e) return;
+            setFile(e);
+            const base64 = await e.arrayBuffer().then((buf) =>
+              'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+            );
+            setPreviewImage(base64);
+          }}
+          /> */}
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditEdukasiLingkungan;
diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx
index eaf32a93..fae291e3 100644
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx
@@ -1,9 +1,11 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
 import HeaderSearch from '../../_com/header';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function Page() { 
   return (
@@ -19,6 +21,7 @@ function Page() {
 }
 
 function ListEdukasiLingkungan() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,9 +34,9 @@ function ListEdukasiLingkungan() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Judul Edukasi Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Deskripsi Edukasi Lingkungan</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -47,9 +50,9 @@ function ListEdukasiLingkungan() {
                   <TableTd>
                     <Image w={100} src="/" alt="image" />
                   </TableTd>
-                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>Deskripsi Edukasi Lingkungan</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx
index 07cfb090..e7b57fe6 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx
@@ -4,8 +4,9 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
-function Page() {
+function CreateGotongRoyong() {
   const router = useRouter()
   return (
     <Box>
@@ -19,17 +20,19 @@ function Page() {
         <Stack gap="xs">
           <Title order={3}>Create Gotong Royong</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
+            placeholder="masukkan judul gotong royong"
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
+            placeholder="masukkan kategori gotong royong"
           />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
           {/* <FileInput
           label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
           value={file}
@@ -62,4 +65,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default CreateGotongRoyong;
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx
new file mode 100644
index 00000000..06e3a53d
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx
@@ -0,0 +1,66 @@
+'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 DetailGotongRoyong() {
+  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 Gotong Royong</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Gotong Royong</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Kategori Gotong Royong</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Gotong Royong</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/gotong-royong/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 DetailGotongRoyong;
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/edit/page.tsx
new file mode 100644
index 00000000..acff7b2f
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/edit/page.tsx
@@ -0,0 +1,68 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function EditGotongRoyong() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Gotong Royong</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
+            placeholder="masukkan judul gotong royong"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
+            placeholder="masukkan kategori gotong royong"
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+          value={file}
+          onChange={async (e) => {
+            if (!e) return;
+            setFile(e);
+            const base64 = await e.arrayBuffer().then((buf) =>
+              'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+            );
+            setPreviewImage(base64);
+          }}
+          /> */}
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditGotongRoyong;
diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx
index 0f0e90aa..28a109bf 100644
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx
@@ -1,8 +1,10 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function GotongRoyong() {
   return (
@@ -18,6 +20,7 @@ function GotongRoyong() {
 }
 
 function ListGotongRoyong() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -30,10 +33,10 @@ function ListGotongRoyong() {
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Kategori</TableTh>
+                  <TableTh>Judul Gotong Royong</TableTh>
+                  <TableTh>Kategori Gotong Royong</TableTh>
                   <TableTh>Image</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Deskripsi Gotong Royong</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -50,7 +53,7 @@ function ListGotongRoyong() {
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/gotong-royong/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx
index 68bd0e1e..9fef945c 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx
@@ -1,11 +1,10 @@
 'use client'
-import React from 'react';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
-function Page() {
+function CreateKonservasiAdatBali() {
   const router = useRouter()
   return (
     <Box>
@@ -19,12 +18,12 @@ function Page() {
         <Stack gap="xs">
           <Title order={3}>Create Konservasi Adat Bali</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Judul Konservasi Adat Bali</Text>}
+            placeholder="masukkan judul konservasi adat bali"
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={<Text fz="sm" fw="bold">Deskripsi Konservasi Adat Bali</Text>}
+            placeholder="masukkan deskripsi konservasi adat bali"
           />
           {/* <FileInput
           label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
@@ -46,17 +45,15 @@ function Page() {
               <IconImageInPicture />
             </Center>
           )} */}
-          <Box>
-            <Text fz="sm" fw="bold">Gambar</Text>
-            <IconImageInPicture size={25} />
-          </Box>
-          <Button bg={colors['blue-button']}>
+         <Group>
+         <Button bg={colors['blue-button']}>
             Simpan
           </Button>
+         </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
 
-export default Page;
+export default CreateKonservasiAdatBali;
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/detail/page.tsx
new file mode 100644
index 00000000..3fe2fd7b
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/detail/page.tsx
@@ -0,0 +1,57 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKonservasiAdatBali() {
+  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 Konservasi Adat Bali</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Konservasi Adat Bali</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Konservasi Adat Bali</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/konservasi-adat-bali/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 DetailKonservasiAdatBali;
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/edit/page.tsx
new file mode 100644
index 00000000..049cd020
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/edit/page.tsx
@@ -0,0 +1,59 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function EditKonservasiAdatBali() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Konservasi Adat Bali</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Konservasi Adat Bali</Text>}
+            placeholder="masukkan judul konservasi adat bali"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi Konservasi Adat Bali</Text>}
+            placeholder="masukkan deskripsi konservasi adat bali"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+          value={file}
+          onChange={async (e) => {
+            if (!e) return;
+            setFile(e);
+            const base64 = await e.arrayBuffer().then((buf) =>
+              'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+            );
+            setPreviewImage(base64);
+          }}
+          />
+          */}
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+          <Group>
+            <Button bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKonservasiAdatBali;
diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx
index 6361c664..d9e13f25 100644
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx
@@ -1,9 +1,10 @@
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import React from 'react';
-import HeaderSearch from '../../_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+'use client'
 import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function KonservasiAdatBali() {
   return (
@@ -19,6 +20,7 @@ function KonservasiAdatBali() {
 }
 
 function ListKonservasiAdatBali() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,9 +33,8 @@ function ListKonservasiAdatBali() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Judul Konservasi Adat Bali</TableTh>
+                  <TableTh>Deskripsi Konservasi Adat Bali</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -41,15 +42,12 @@ function ListKonservasiAdatBali() {
                 <TableTr>
                   <TableTd>
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                      <Text truncate="end" fz={"sm"}>Judul Konservasi Adat Bali</Text>
                     </Box>
                   </TableTd>
+                  <TableTd>Deskripsi Konservasi Adat Bali</TableTd>
                   <TableTd>
-                    <Image w={100} src="/" alt="image" />
-                  </TableTd>
-                  <TableTd>Deskripsi</TableTd>
-                  <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push("/admin/lingkungan/konservasi-adat-bali/detail")}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx
deleted file mode 100644
index c8697ae0..00000000
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client'
-import colors from "@/con/colors";
-import { Box, Button, Paper, Stack, Title, TextInput, Text } from "@mantine/core";
-import { IconArrowBack } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-
-
-export default function CreatePengelolaanSampahBankSampah() {
-    const router = useRouter()
-    return (
-        <Box>
-            <Box mb={10}>
-                <Button variant="subtle" onClick={() => router.back()}>
-                    <IconArrowBack color={colors['blue-button']} size={25} />
-                </Button>
-            </Box>
-
-            <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-                <Stack gap="xs">
-                    <Title order={3}>Create Mekanisme Bank Sampah</Title>
-
-                    <TextInput
-                        label={<Text fz="sm" fw="bold">Judul</Text>}
-                        placeholder="masukkan judul"
-                    />
-
-                    <TextInput
-                        label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-                        placeholder="masukkan deskripsi"
-                    />
-
-                    {/* <FileInput
-                        label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-                        value={file}
-                        onChange={async (e) => {
-                            if (!e) return;
-                            setFile(e);
-                            const base64 = await e.arrayBuffer().then((buf) =>
-                                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                            );
-                            setPreviewImage(base64);
-                        }}
-                    /> */}
-
-                    {/* {previewImage ? (
-                        <Image alt="" src={previewImage} w={200} h={200} />
-                    ) : (
-                        <Center w={200} h={200} bg="gray">
-                            <IconImageInPicture />
-                        </Center>
-                    )} */}
-
-                    <Box>
-                        <Text fz="sm" fw="bold">Konten</Text>
-                        {/* <CreateEditor
-                            value={potensiState.create.form.content}
-                            onChange={(htmlContent) => {
-                                potensiState.create.form.content = htmlContent;
-                            }}
-                        /> */}
-                    </Box>
-
-                    <Button bg={colors['blue-button']} >
-                        Simpan
-                    </Button>
-                </Stack>
-            </Paper>
-        </Box>
-    )
-}
-
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create/page.tsx
new file mode 100644
index 00000000..84db20f6
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+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';
+
+
+
+function CreateKeteranganBankSampahTerdekat() {
+  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}>Create Keterangan Bank Sampah Terdekat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Bank Sampah Terdekat</Text>}
+            placeholder='Masukkan nama bank sampah terdekat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Bank Sampah Terdekat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKeteranganBankSampahTerdekat;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail/page.tsx
new file mode 100644
index 00000000..9d90797e
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail/page.tsx
@@ -0,0 +1,62 @@
+'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 DetailKeteranganBankSampahTerdekat() {
+  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 Keterangan Bank Sampah Terdekat</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Bank Sampah Terdekat</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/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/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 DetailKeteranganBankSampahTerdekat;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/edit/page.tsx
new file mode 100644
index 00000000..3ef09d42
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/edit/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+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';
+
+
+
+function EditKeteranganBankSampahTerdekat() {
+  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 Keterangan Bank Sampah Terdekat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Bank Sampah Terdekat</Text>}
+            placeholder='Masukkan nama bank sampah terdekat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Bank Sampah Terdekat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKeteranganBankSampahTerdekat;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/page.tsx
new file mode 100644
index 00000000..af496ce6
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/page.tsx
@@ -0,0 +1,55 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function KeteranganBankSampahTerdekat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <JudulListTab
+            title='Keterangan Bank Sampah Terdekat'
+            href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={20} />}
+          />
+          <Title order={4}>List Keterangan Bank Sampah Terdekat</Title>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Bank Sampah Terdekat</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Bank Sampah Sarana Gathi</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} alt="image" />
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default KeteranganBankSampahTerdekat;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create/page.tsx
new file mode 100644
index 00000000..58b82dcc
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+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';
+
+
+
+function CreateMekanismeBankSampah() {
+  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}>Create Mekanisme Bank Sampah</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateMekanismeBankSampah;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail/page.tsx
new file mode 100644
index 00000000..2621b440
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail/page.tsx
@@ -0,0 +1,61 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPengelolaanSampahBankSampah() {
+  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 Mekanisme Bank Sampah</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <IconImageInPicture color={colors['blue-button']} size={25} />
+              </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/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/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 DetailPengelolaanSampahBankSampah;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit/page.tsx
new file mode 100644
index 00000000..70086bdb
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+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';
+
+
+
+function EditMekanismeBankSampah() {
+  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 Mekanisme Bank Sampah</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditMekanismeBankSampah;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/page.tsx
similarity index 60%
rename from src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx
rename to src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/page.tsx
index c6bef31a..923625eb 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/page.tsx
@@ -1,39 +1,29 @@
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import React from 'react';
-import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+'use client'
 import colors from '@/con/colors';
-import JudulList from '@/app/admin/(dashboard)/_com/judulList';
-
-function ListPage() {
-  return (
-    <Box py={10}>
-      <HeaderSearch
-        title='Mekanisme Bank Sampah'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-      />
-      <ListPengelolaanSampahBankSampah />
-    </Box>
-  );
-}
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
 
 function ListPengelolaanSampahBankSampah() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-          title='List Mekanisme Bank Sampah'
-          href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/create'
+        <Stack gap={"xs"}>
+          <JudulListTab
+            title='Mekanisme Bank Sampah'
+            href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={20} />}
           />
+          <Title order={4}>List Mekanisme Bank Sampah</Title>
           <Box style={{ overflowX: "auto" }}>
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
               <TableThead>
                 <TableTr>
                   <TableTh>Judul</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -45,11 +35,10 @@ function ListPengelolaanSampahBankSampah() {
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Image w={100}  alt="image" />
+                    <Image w={100} alt="image" />
                   </TableTd>
-                  <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
@@ -63,4 +52,4 @@ function ListPengelolaanSampahBankSampah() {
   )
 }
 
-export default ListPage;
+export default ListPengelolaanSampahBankSampah;
diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx
index 85239543..d7ad5a36 100644
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx
@@ -1,6 +1,9 @@
 import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import ListPage from './ui/list_page/listPage';
+
 import colors from '@/con/colors';
+import ListPengelolaanSampahBankSampah from './list_pengelolaan_sampah_bank_sampah/page';
+import KeteranganBankSampahTerdekat from './keterangan_bank_sampah_terdekat/page';
+
 
 function PengelolaanSampahBankSampah() {
   return (
@@ -13,16 +16,16 @@ function PengelolaanSampahBankSampah() {
               List Pengelolaan Sampah Bank Sampah
             </TabsTab>
             <TabsTab value="maps">
-              Maps
+              Keterangan Bank Sampah Terdekat
             </TabsTab>
-          </TabsList> 
+          </TabsList>
 
           <TabsPanel value="list">
-            <ListPage />
+            <ListPengelolaanSampahBankSampah />
           </TabsPanel>
 
           <TabsPanel value="maps">
-            Maps
+            <KeteranganBankSampahTerdekat />
           </TabsPanel>
         </Tabs>
       </Stack>
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
index 4c1e91c2..210924d8 100644
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
@@ -1,73 +1,53 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+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 Page() {
-  const router = useRouter()
+
+function CreateProgramKreatifDesa() {
+  const router = useRouter();
   return (
     <Box>
-     <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
         </Button>
       </Box>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
-          <Title order={3}>Create Program Penghijauan</Title>
-
-          <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <Text fz="sm" fw="bold">Gambar</Text>
-          <IconImageInPicture size={25} />
-          {/* <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-                if (!e) return;
-                setFile(e);
-                const base64 = await e.arrayBuffer().then((buf) =>
-                    'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                );
-                setPreviewImage(base64);
-            }}
-          /> */}
-
-          {/* {previewImage ? (
-              <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-              <Center w={200} h={200} bg="gray">
-                  <IconImageInPicture />
-              </Center>
-          )} */}
-
+          <Title order={4}>Create Program Penghijauan</Title>
           <Box>
-              <Text fz="sm" fw="bold">Konten</Text>
-              {/* <CreateEditor
-                  value={potensiState.create.form.content}
-                  onChange={(htmlContent) => {
-                      potensiState.create.form.content = htmlContent;
-                  }}
-              /> */}
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
           </Box>
-
-          <Button bg={colors['blue-button']}>
-              Simpan Potensi
-          </Button>
-        </Stack>
+          <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>
+   </Box>
   );
 }
 
-export default Page;
+export default CreateProgramKreatifDesa;
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/detail/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/detail/page.tsx
new file mode 100644
index 00000000..0bfd8eb8
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/detail/page.tsx
@@ -0,0 +1,62 @@
+'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;
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/edit/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/edit/page.tsx
new file mode 100644
index 00000000..bf340820
--- /dev/null
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/edit/page.tsx
@@ -0,0 +1,53 @@
+'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;
diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
index e818879d..a5c4278e 100644
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
@@ -1,8 +1,10 @@
+'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 { useRouter } from 'next/navigation';
 
 function ProgramPenghijauan() {
   return (
@@ -18,20 +20,21 @@ function ProgramPenghijauan() {
 }
 
 function ListManfaatPenghijauan() {
+  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' }}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Nama Program Penghijauan</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Jumlah</TableTh>
                   <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
@@ -42,16 +45,13 @@ function ListManfaatPenghijauan() {
                     <Box w={100}>
                       <Text truncate="end" fz={"sm"}>Judul</Text>
                     </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Jumlah</Text>
-                  </TableTd>
+                  </TableTd>  
                   <TableTd>
                     <Image w={100}  alt="image" />
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/program-penghijauan/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>