Jum'at, 30 May 2025 :

Yang Sudah Di Kerjakan
* Tampilan UI Admin di menu inovasi
* API Create, edit dan delete potensi

Yang Lagi Dikerjakan:
* Progress Tampilan UI Admin Di Menu lingkungan
* Progress API Create, edit dan delete potensi

Yang Akan Dikerjakan:
* API Create, edit dan delete pengumuman
* Tampilan UI Admin Di Menu Pendidikan

src/app/admin/(dashboard)/_com/header.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain
+import colors from '@/con/colors';
+
+
+const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => {
+  return (
+    <Grid>
+      <GridCol span={{ base: 12, md: 9 }}>
+        <Title order={3}>{title}</Title>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 3 }}>
+        <Paper radius={"lg"} bg={colors['white-1']}>
+          <TextInput
+            radius="lg"
+            placeholder={placeholder}
+            leftSection={searchIcon}
+            w="100%"
+          />
+        </Paper>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default HeaderSearch;

src/app/admin/(dashboard)/_com/judulList.tsx

@@ -0,0 +1,30 @@
+
+'use client'
+import colors from '@/con/colors';
+import { Grid, GridCol, Button, Text } from '@mantine/core';
+import { IconCircleDashedPlus } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const JudulList = ({ title = "", href = "#" }) => {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(href);
+  };
+
+  return (
+    <Grid align="center" mb={10}>
+      <GridCol span={{ base: 12, md: 11 }}>
+        <Text fz={"xl"} fw={"bold"}>{title}</Text>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 1 }} ta="right">
+        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+          <IconCircleDashedPlus size={25} />
+        </Button>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default JudulList;

src/app/admin/(dashboard)/desa/potensi/page.tsx

@@ -1,30 +1,24 @@
 
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import potensiDesaState from '../../_state/desa/potensi';
-import { useRouter } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import potensiDesaState from '../../_state/desa/potensi';
 
 
 function Potensi() {
   return (
     <Box>
-      <Grid>
+      <HeaderSearch
-        <GridCol span={{ base: 12, md: 9 }}>
+        title='Potensi Desa'
-          <Title order={3}>Potensi Desa</Title>
+        placeholder='pencarian'
-        </GridCol>
+        searchIcon={<IconSearch size={20} />}
-        <GridCol span={{ base: 12, md: 3 }}>
+      />
-          <Paper radius={"lg"} bg={colors['white-1']}>
-            <TextInput
-              radius="lg"
-              placeholder='pencarian'
-              leftSection={<IconSearch size={20} />} />
-          </Paper>
-        </GridCol>
-      </Grid>
       <ListPotensi />
     </Box>
   );
@@ -51,16 +45,10 @@ function ListPotensi() {
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Grid>
+          <JudulList
-            <GridCol span={{ base: 12, md: 11 }}>
+          title='List Potensi'
-              <Text fz={"xl"} fw={"bold"}>List Potensi</Text>
+          href='/admin/desa/potensi/create'
-            </GridCol>
+          />
-            <GridCol span={{ base: 12, md: 1}}>
-              <Button onClick={() => router.push("/admin/desa/potensi/create")} bg={colors['blue-button']}>
-                <IconCircleDashedPlus size={25} />
-              </Button>
-            </GridCol>
-          </Grid>
           <Box style={{ overflowX: "auto" }}>
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
               <TableThead>

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/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';
+
+function CreateDataLingkunganDesa() {
+  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 Data Lingkungan Desa</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"
+          />
+          <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 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 Data
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx

@@ -1,11 +1,66 @@
+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';
 
-function Page() {
+function DataLingkunganDesa() {
   return (
-    <div>
+    <Box>
-      data-lingkungan-desa
+      <HeaderSearch
-    </div>
+      title='Data Lingkungan Desa'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListDataLingkunganDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListDataLingkunganDesa() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+          <JudulList
+          title='List Data Lingkungan Desa'
+          href='/admin/lingkungan/data-lingkungan-desa/create'
+          />
+          <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>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default DataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/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 Page() {
+  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 Edukasi Lingkungan</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">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

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

@@ -1,11 +1,66 @@
+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';
 
-function Page() {
+function Page() { 
   return (
-    <div>
+    <Box py={10}>
-      edukasi-lingkungan
+      <HeaderSearch
-    </div>
+      title='Edukasi Lingkungan'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListEdukasiLingkungan/>
+    </Box>
   );
 }
 
+function ListEdukasiLingkungan() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Edukasi Lingkungan'
+          href='/admin/lingkungan/edukasi-lingkungan/create'
+          />
+          <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>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} src="/" alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
 export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx

@@ -0,0 +1,65 @@
+'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';
+
+function Page() {
+  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 Gotong Royong</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+          <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">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx

@@ -1,11 +1,68 @@
-import React from 'react';
+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';
 
-function Page() {
+function GotongRoyong() {
   return (
-    <div>
+    <Box>
-      gotong-royong
+      <HeaderSearch
-    </div>
+      title='Gotong Royong'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListGotongRoyong/>
+    </Box>
   );
 }
 
-export default Page;
+function ListGotongRoyong() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Gotong Royong'
+          href='/admin/lingkungan/gotong-royong/create'
+          />
+          <Box style={{ overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Kategori</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>Kategori</TableTd>
+                  <TableTd>
+                    <Image w={100} src="/" alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+                
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default GotongRoyong;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx

@@ -0,0 +1,62 @@
+'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 Page() {
+  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 Konservasi Adat Bali</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">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx

@@ -1,11 +1,66 @@
+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';
 
-function Page() {
+function KonservasiAdatBali() {
   return (
-    <div>
+    <Box py={10}>
-     konservasi-adat-bali
+      <HeaderSearch
-    </div>
+      title='Konservasi Adat Bali'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListKonservasiAdatBali />
+    </Box>
   );
 }
 
-export default Page;
+function ListKonservasiAdatBali() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Konservasi Adat Bali'
+          href='/admin/lingkungan/konservasi-adat-bali/create'
+          />
+          <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>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} src="/" alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default KonservasiAdatBali;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx

@@ -0,0 +1,71 @@
+'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>
+    )
+}
+

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,11 +1,33 @@
-import React from 'react';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import ListPage from './ui/list_page/listPage';
+import colors from '@/con/colors';
 
-function Page() {
+function PengelolaanSampahBankSampah() {
   return (
-    <div>
+    <Box>
-      pengelolaan-sampah-bank-sampah
+      <Stack>
-    </div>
+        <Title order={3}>Pengelolaan Sampah Bank Sampah</Title>
-  );
+        <Tabs defaultValue="list" color={colors['blue-button']} variant="pills">
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="list">
+              List Pengelolaan Sampah Bank Sampah
+            </TabsTab>
+            <TabsTab value="maps">
+              Maps
+            </TabsTab>
+          </TabsList> 
+
+          <TabsPanel value="list">
+            <ListPage />
+          </TabsPanel>
+
+          <TabsPanel value="maps">
+            Maps
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
+  )
 }
 
-export default Page;
+export default PengelolaanSampahBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx

@@ -0,0 +1,66 @@
+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';
+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>
+  );
+}
+
+function ListPengelolaanSampahBankSampah() {
+  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'
+          />
+          <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>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ListPage;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/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';
+
+function Page() {
+  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 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>
+          )} */}
+
+          <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 Potensi
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

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

@@ -1,11 +1,68 @@
-import React from 'react';
+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';
 
-function Page() {
+function ProgramPenghijauan() {
   return (
-    <div>
+   <Box>
-      program-penghijauan
+    <HeaderSearch
-    </div>
+    title='Program Penghijauan'
+    placeholder='pencarian'
+    searchIcon={<IconSearch size={20}/>}
+    />
+    <ListManfaatPenghijauan/>
+   </Box>
   );
 }
 
-export default Page;
+function ListManfaatPenghijauan() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Manfaat Program Penghijauan'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Jumlah</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Jumlah</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ProgramPenghijauan;