API & UI Menu Lingkungan, Submenu Edukas Lingkungan

2025-07-18 21:24:51 +08:00
parent f05a096633
commit e2f75ff3ad
30 changed files with 1176 additions and 255 deletions
--- a/src/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan.ts
@@ -0,0 +1,240 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateTujuanEdukasiForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TujuanEdukasiForm = Prisma.TujuanEdukasiLingkunganGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateTujuanEdukasi = proxy({
+  findById: {
+    data: null as TujuanEdukasiForm | null,
+    loading: false,
+    initialize() {
+      stateTujuanEdukasi.findById.data = {
+        id: '',
+        judul: '',
+        deskripsi: '',
+      } as TujuanEdukasiForm;
+    },
+    async load(id: string) {
+      try {
+        stateTujuanEdukasi.findById.loading = true;
+        const res = await ApiFetch.api.lingkungan.edukasilingkungan.tujuanedukasilingkungan["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateTujuanEdukasi.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tujuan edukasi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data tujuan edukasi");
+      } finally {
+        stateTujuanEdukasi.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TujuanEdukasiForm) {
+      const cek = templateTujuanEdukasiForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateTujuanEdukasi.update.loading = true;
+        const res = await ApiFetch.api.lingkungan.edukasilingkungan.tujuanedukasilingkungan["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Data tujuan edukasi berhasil diubah");
+          await stateTujuanEdukasi.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tujuan edukasi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data tujuan edukasi");
+      } finally {
+        stateTujuanEdukasi.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateMateriEdukasiLingkunganForm = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  });
+  
+  type MateriEdukasiLingkunganForm = Prisma.MateriEdukasiLingkunganGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+  
+  const stateMateriEdukasiLingkungan = proxy({
+    findById: {
+      data: null as MateriEdukasiLingkunganForm | null,
+      loading: false,
+      initialize() {
+        stateMateriEdukasiLingkungan.findById.data = {
+          id: '',
+          judul: '',
+          deskripsi: '',
+        } as MateriEdukasiLingkunganForm;
+      },
+      async load(id: string) {
+        try {
+          stateMateriEdukasiLingkungan.findById.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.materiedukasilingkungan["find-by-id"].get({
+            query: { id },
+          });
+          if (res.status === 200) {
+            stateMateriEdukasiLingkungan.findById.data = res.data?.data ?? null;
+          } else {
+            toast.error("Gagal mengambil data materi edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data materi edukasi");
+        } finally {
+          stateMateriEdukasiLingkungan.findById.loading = false;
+        }
+      },
+    },
+  
+    update: {
+      loading: false,
+      async save(data: MateriEdukasiLingkunganForm) {
+        const cek = templateMateriEdukasiLingkunganForm.safeParse(data);
+        if (!cek.success) {
+          const errors = cek.error.issues
+            .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+            .join(", ");
+          toast.error(`Form tidak valid: ${errors}`);
+          return;
+        }
+  
+        try {
+          stateMateriEdukasiLingkungan.update.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.materiedukasilingkungan["update"].post(data);
+          if (res.status === 200) {
+            toast.success("Data materi edukasi berhasil diubah");
+            await stateMateriEdukasiLingkungan.findById.load(data.id);
+          } else {
+            toast.error("Gagal mengubah data materi edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengubah data materi edukasi");
+        } finally {
+          stateMateriEdukasiLingkungan.update.loading = false;
+        }
+      },
+    },
+  });
+
+  const templateContohEdukasiLingkunganForm = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  });
+  
+  type ContohEdukasiLingkunganForm = Prisma.ContohEdukasiLingkunganGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+  
+  const stateContohEdukasiLingkungan = proxy({
+    findById: {
+      data: null as ContohEdukasiLingkunganForm | null,
+      loading: false,
+      initialize() {
+        stateContohEdukasiLingkungan.findById.data = {
+          id: '',
+          judul: '',
+          deskripsi: '',
+        } as ContohEdukasiLingkunganForm;
+      },
+      async load(id: string) {
+        try {
+          stateContohEdukasiLingkungan.findById.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.contohkegiatandesa["find-by-id"].get({
+            query: { id },
+          });
+          if (res.status === 200) {
+            stateContohEdukasiLingkungan.findById.data = res.data?.data ?? null;
+          } else {
+            toast.error("Gagal mengambil data contoh edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data contoh edukasi");
+        } finally {
+          stateContohEdukasiLingkungan.findById.loading = false;
+        }
+      },
+    },
+  
+    update: {
+      loading: false,
+      async save(data: ContohEdukasiLingkunganForm) {
+        const cek = templateContohEdukasiLingkunganForm.safeParse(data);
+        if (!cek.success) {
+          const errors = cek.error.issues
+            .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+            .join(", ");
+          toast.error(`Form tidak valid: ${errors}`);
+          return;
+        }
+  
+        try {
+          stateContohEdukasiLingkungan.update.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.contohkegiatandesa["update"].post(data);
+          if (res.status === 200) {
+            toast.success("Data contoh edukasi berhasil diubah");
+            await stateContohEdukasiLingkungan.findById.load(data.id);
+          } else {
+            toast.error("Gagal mengubah data contoh edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengubah data contoh edukasi");
+        } finally {
+          stateContohEdukasiLingkungan.update.loading = false;
+        }
+      },
+    },
+  });
+
+
+const stateEdukasiLingkungan = proxy({
+    stateTujuanEdukasi,
+    stateMateriEdukasiLingkungan,
+    stateContohEdukasiLingkungan
+})
+  
+
+export default stateEdukasiLingkungan;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/edukasiLingkunganTextEditor.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/edukasiLingkunganTextEditor.tsx
@@ -0,0 +1,100 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useEffect } from 'react';
+
+
+export function EdukasiLingkunganTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent || '<p></p>');
+    }
+  }, [initialContent, editor]);
+
+  return (
+    <Stack >
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx
@@ -0,0 +1,67 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Tujuan Edukasi Lingkungan",
+            value: "tujuanedukasilingkungan",
+            href: "/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan"
+        },
+        {
+            label: "Materi Edukasi Yang Diberikan",
+            value: "materiedukasiyangdiberikan",
+            href: "/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan"
+        },
+        {
+            label: "Contoh Kegiatan Di Desa Darmasaba",
+            value: "contohkegiatan",
+            href: "/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabs;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
@@ -0,0 +1,87 @@
+'use client'
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
+  ssr: false,
+});
+
+function EditContohKegiatanDesaDarmasaba() {
+  const router = useRouter()
+  const contohEdukasiState = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!contohEdukasiState.findById.data) {
+      contohEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (contohEdukasiState.findById.data) {
+      setJudul(contohEdukasiState.findById.data.judul ?? '')
+      setContent(contohEdukasiState.findById.data.deskripsi ?? '')
+    }
+  }, [contohEdukasiState.findById.data])
+
+  const submit = () => {
+    if (contohEdukasiState.findById.data) {
+      contohEdukasiState.findById.data.judul = judul;
+      contohEdukasiState.findById.data.deskripsi = content;
+      contohEdukasiState.update.save(contohEdukasiState.findById.data)
+    }
+    router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Contoh Kegiatan Di Desa Darmasaba</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={contohEdukasiState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditContohKegiatanDesaDarmasaba;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx
@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
+
+function Page() {
+  const router = useRouter()
+  const listContohEdukasi = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan)
+  useShallowEffect(() => {
+    listContohEdukasi.findById.load('edit')
+  }, [])
+
+  if (!listContohEdukasi.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Contoh Kegiatan Di Desa Darmasaba</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx
@@ -1,61 +0,0 @@
-'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 CreateEdukasiLingkungan() {
-  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 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 CreateEdukasiLingkungan;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx
@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function 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;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx
@@ -1,61 +0,0 @@
-'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;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx
@@ -0,0 +1,10 @@
+'use client'
+import LayoutTabs from "./_lib/layouTabs";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  )
+}
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
@@ -0,0 +1,87 @@
+'use client'
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
+  ssr: false,
+});
+
+function EditMateriEdukasiYangDiberikan() {
+  const router = useRouter()
+  const materiEdukasiState = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!materiEdukasiState.findById.data) {
+      materiEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (materiEdukasiState.findById.data) {
+      setJudul(materiEdukasiState.findById.data.judul ?? '')
+      setContent(materiEdukasiState.findById.data.deskripsi ?? '')
+    }
+  }, [materiEdukasiState.findById.data])
+
+  const submit = () => {
+    if (materiEdukasiState.findById.data) {
+      materiEdukasiState.findById.data.judul = judul;
+      materiEdukasiState.findById.data.deskripsi = content;
+      materiEdukasiState.update.save(materiEdukasiState.findById.data)
+    }
+    router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Materi Edukasi Yang Diberikan</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Content</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={materiEdukasiState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditMateriEdukasiYangDiberikan;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx
@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
+
+function Page() {
+  const router = useRouter()
+  const listMateriEdukasi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan)
+  useShallowEffect(() => {
+    listMateriEdukasi.findById.load('edit')
+  }, [])
+
+  if (!listMateriEdukasi.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Materi Edukasi Yang Diberikan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx
@@ -1,69 +0,0 @@
-'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 (
-    <Box py={10}>
-      <HeaderSearch
-      title='Edukasi Lingkungan'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListEdukasiLingkungan/>
-    </Box>
-  );
-}
-
-function ListEdukasiLingkungan() {
-  const router = useRouter();
-  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 Edukasi Lingkungan</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi Edukasi Lingkungan</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 Edukasi Lingkungan</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default Page;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
@@ -0,0 +1,87 @@
+'use client'
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanEdukasiLingkungan() {
+  const router = useRouter()
+  const tujuanEdukasiState = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!tujuanEdukasiState.findById.data) {
+      tujuanEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (tujuanEdukasiState.findById.data) {
+      setJudul(tujuanEdukasiState.findById.data.judul ?? '')
+      setContent(tujuanEdukasiState.findById.data.deskripsi ?? '')
+    }
+  }, [tujuanEdukasiState.findById.data])
+
+  const submit = () => {
+    if (tujuanEdukasiState.findById.data) {
+      tujuanEdukasiState.findById.data.judul = judul;
+      tujuanEdukasiState.findById.data.deskripsi = content;
+      tujuanEdukasiState.update.save(tujuanEdukasiState.findById.data)
+    }
+    router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Tujuan Edukasi Lingkungan</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Content</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={tujuanEdukasiState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanEdukasiLingkungan;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx
@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
+
+function Page() {
+  const router = useRouter()
+  const listTujuanEdukasi = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  useShallowEffect(() => {
+    listTujuanEdukasi.findById.load('edit')
+  }, [])
+
+  if (!listTujuanEdukasi.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Tujuan Edukasi Lingkungan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;
--- a/src/app/admin/_com/list_PageAdmin.tsx
+++ b/src/app/admin/_com/list_PageAdmin.tsx
@@ -328,7 +328,7 @@ export const navBar = [
      {
        id: "Lingkungan_5",
        name: "Edukasi Lingkungan",
-        path: "/admin/lingkungan/edukasi-lingkungan"
+        path: "/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan"
      },
      {
        id: "Lingkungan_6",
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa/findUnique.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa/findUnique.ts
@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function contohKegiatanDesaFindUnique(context: Context) {
+    try {
+        const id = context?.params?.slugs?.[0];
+
+        // If no ID provided, get the first profile
+        if (!id) {
+            const data = await prisma.contohEdukasiLingkungan.findFirst();
+            return {
+                success: true,
+                data,
+            };
+        }
+
+        const data = await prisma.contohEdukasiLingkungan.findUniqueOrThrow({
+            where: { id },
+        });
+
+        return {
+            success: true,
+            data,
+        };
+    } catch (error) {
+        console.error("Error fetching contoh edukasi lingkungan:", error);
+
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+        };
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa/index.ts
@@ -0,0 +1,18 @@
+import Elysia, { t } from "elysia";
+import contohKegiatanDesaFindUnique from "./findUnique";
+import contohKegiatanDesaUpdate from "./updt";
+
+const ContohKegiatanDesa = new Elysia({
+    prefix: "/contohkegiatandesa",
+    tags: ["Lingkungan/Edukasi Lingkungan/Contoh Kegiatan Desa"]
+})
+    .get("/find-by-id", contohKegiatanDesaFindUnique)
+    .post("/update", contohKegiatanDesaUpdate, {
+        body: t.Object({
+            id: t.String(),
+            judul: t.String(),
+            deskripsi: t.String(),
+        })
+    })
+
+export default ContohKegiatanDesa
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa/updt.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa/updt.ts
@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ContohEdukasiLingkunganGetPayload<{
+    select: {
+        id: true;
+        judul: true;
+        deskripsi: true;
+    }
+}>
+export default async function contohKegiatanDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.contohEdukasiLingkungan.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            judul: body.judul,
+            deskripsi: body.deskripsi,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Contoh kegiatan desa berhasil diupdate",
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/index.ts
@@ -0,0 +1,14 @@
+import Elysia from "elysia";
+import TujuanEdukasiLingkungan from "./tujuan-edukasi-lingkungan";
+import MateriEdukasiLingkungan from "./materi-edukasi-lingkunga";
+import ContohKegiatanDesa from "./contoh-kegiatan-desa";
+
+const EdukasiLingkungan = new Elysia({
+    prefix: "/edukasilingkungan",
+    tags: ["Lingkungan/Edukasi Lingkungan"]
+})
+.use(TujuanEdukasiLingkungan)
+.use(MateriEdukasiLingkungan)
+.use(ContohKegiatanDesa)
+
+export default EdukasiLingkungan; 
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/materi-edukasi-lingkunga/findUnique.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/materi-edukasi-lingkunga/findUnique.ts
@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function materiEdukasiLingkunganFindUnique(context: Context) {
+    try {
+        const id = context?.params?.slugs?.[0];
+
+        // If no ID provided, get the first profile
+        if (!id) {
+            const data = await prisma.materiEdukasiLingkungan.findFirst();
+            return {
+                success: true,
+                data,
+            };
+        }
+
+        const data = await prisma.materiEdukasiLingkungan.findUniqueOrThrow({
+            where: { id },
+        });
+
+        return {
+            success: true,
+            data,
+        };
+    } catch (error) {
+        console.error("Error fetching materi edukasi lingkungan:", error);
+
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+        };
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/materi-edukasi-lingkunga/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/materi-edukasi-lingkunga/index.ts
@@ -0,0 +1,19 @@
+import Elysia, { t } from "elysia";
+
+import materiEdukasiLingkunganUpdate from "./updt";
+import materiEdukasiLingkunganFindUnique from "./findUnique";
+
+const MateriEdukasiLingkungan = new Elysia({
+    prefix: "/materiedukasilingkungan",
+    tags: ["Lingkungan/Edukasi Lingkungan/Materi Edukasi Lingkungan"]
+})
+    .get("/find-by-id", materiEdukasiLingkunganFindUnique)
+    .post("/update", materiEdukasiLingkunganUpdate, {
+        body: t.Object({
+            id: t.String(),
+            judul: t.String(),
+            deskripsi: t.String(),
+        })
+    })
+
+export default MateriEdukasiLingkungan
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/materi-edukasi-lingkunga/updt.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/materi-edukasi-lingkunga/updt.ts
@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.MateriEdukasiLingkunganGetPayload<{
+    select: {
+        id: true;
+        judul: true;
+        deskripsi: true;
+    }
+}>
+export default async function materiEdukasiLingkunganUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.materiEdukasiLingkungan.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            judul: body.judul,
+            deskripsi: body.deskripsi,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Materi edukasi lingkungan berhasil diupdate",
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/findUnqiue.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/findUnqiue.ts
@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function tujuanEdukasiLingkunganFindUnique(context: Context) {
+    try {
+        const id = context?.params?.slugs?.[0];
+
+        // If no ID provided, get the first profile
+        if (!id) {
+            const data = await prisma.tujuanEdukasiLingkungan.findFirst();
+            return {
+                success: true,
+                data,
+            };
+        }
+
+        const data = await prisma.tujuanEdukasiLingkungan.findUniqueOrThrow({
+            where: { id },
+        });
+
+        return {
+            success: true,
+            data,
+        };
+    } catch (error) {
+        console.error("Error fetching tujuan edukasi lingkungan:", error);
+
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+        };
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/index.ts
@@ -0,0 +1,18 @@
+import Elysia, { t } from "elysia";
+import tujuanEdukasiLingkunganFindUnique from "./findUnqiue";
+import tujuanEdukasiLingkunganUpdate from "./updt";
+
+const TujuanEdukasiLingkungan = new Elysia({
+    prefix: "/tujuanedukasilingkungan",
+    tags: ["Lingkungan/Edukasi Lingkungan/Tujuan Edukasi Lingkungan"]
+})
+    .get("/find-by-id", tujuanEdukasiLingkunganFindUnique)
+    .post("/update", tujuanEdukasiLingkunganUpdate, {
+        body: t.Object({
+            id: t.String(),
+            judul: t.String(),
+            deskripsi: t.String(),
+        })
+    })
+
+export default TujuanEdukasiLingkungan
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/updt.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/updt.ts
@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.TujuanEdukasiLingkunganGetPayload<{
+    select: {
+        id: true;
+        judul: true;
+        deskripsi: true;
+    }
+}>
+export default async function tujuanEdukasiLingkunganUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.tujuanEdukasiLingkungan.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            judul: body.judul,
+            deskripsi: body.deskripsi,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Tujuan edukasi lingkungan berhasil diupdate",
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/lingkungan/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/lingkungan/index.ts
@@ -2,6 +2,7 @@ import Elysia from "elysia";
 import PengelolaanSampah from "./pengelolaan-sampah";
 import ProgramPenghijauan from "./program-penghijauan";
 import DataLingkunganDesa from "./data-lingkungan-desa";
+import EdukasiLingkungan from "./edukasi-lingkungan";

 const Lingkungan = new Elysia({
  prefix: "/api/lingkungan",
@@ -11,5 +12,6 @@ const Lingkungan = new Elysia({
 .use(PengelolaanSampah)
 .use(ProgramPenghijauan)
 .use(DataLingkunganDesa)
+.use(EdukasiLingkungan)

 export default Lingkungan;