diff --git a/src/app/api/new/donasi/[id]/route.ts b/src/app/api/new/donasi/[id]/route.ts
new file mode 100644
index 00000000..64c367c0
--- /dev/null
+++ b/src/app/api/new/donasi/[id]/route.ts
@@ -0,0 +1,34 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+// GET ONE DATA DONASI
+export async function GET(request: Request, context: { params: { id: string } }) {
+   try {
+      const { id } = context.params
+      const data = await prisma.donasi.findFirst({
+         where: {
+            id: id
+         },
+         include: {
+            Author: true,
+            imageDonasi: true,
+            CeritaDonasi: true,
+            DonasiMaster_Ketegori: true,
+            DonasiMaster_Durasi: true,
+            DonasiMaster_Status: true,
+            Donasi_Invoice: true,
+            Donasi_Kabar: true,
+            Donasi_PencairanDana: true,
+         },
+      });
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}
\ No newline at end of file
diff --git a/src/app/dev/donasi/edit/edit_donasi/[id]/page.tsx b/src/app/dev/donasi/edit/edit_donasi/[id]/page.tsx
index cb62d88a..923fdcf9 100644
--- a/src/app/dev/donasi/edit/edit_donasi/[id]/page.tsx
+++ b/src/app/dev/donasi/edit/edit_donasi/[id]/page.tsx
@@ -1,15 +1,16 @@
-import { EditDonasi } from "@/app_modules/donasi";
+import { EditDonasi, EditDonasiNew } from "@/app_modules/donasi";
 import { Donasi_getMasterDurasi, Donasi_getMasterKategori } from "@/app_modules/donasi/fun";
 import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
 
-export default async function Page({params}: {params: {id: string}}) {
-  const dataDonasi = await Donasi_getOneById(params.id)
-  const masterKategori = await Donasi_getMasterKategori()
-  const masterDurasi  = await Donasi_getMasterDurasi()
+export default async function Page({ params }: { params: { id: string } }) {
+  // const dataDonasi = await Donasi_getOneById(params.id)
+  // const masterKategori = await Donasi_getMasterKategori()
+  // const masterDurasi = await Donasi_getMasterDurasi()
 
   return (
     <>
-      <EditDonasi dataDonasi={dataDonasi as any} masterKategori={masterKategori} masterDurasi={masterDurasi} />
+      {/* <EditDonasi dataDonasi={dataDonasi as any} masterKategori={masterKategori} masterDurasi={masterDurasi} /> */}
+      <EditDonasiNew />
     </>
   );
 }
diff --git a/src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx b/src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx
new file mode 100644
index 00000000..40d136b4
--- /dev/null
+++ b/src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx
@@ -0,0 +1,336 @@
+"use client";
+import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_BoxUploadImage, ComponentGlobal_LoadImageCustom, } from "@/app_modules/_global/component";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { funGlobal_DeleteFileById, funGlobal_UploadToStorage, } from "@/app_modules/_global/fun";
+import { ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiPeringatan, } from "@/app_modules/_global/notif_global";
+import { AspectRatio, Button, Center, FileButton, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCamera } from "@tabler/icons-react";
+import _ from "lodash";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
+import { apiGetMasterDonasi, apiGetOneDonasiById } from "../../lib/api_donasi";
+import { MODEL_DONASI } from "../../model/interface";
+import SkeletonEditDonasi from "./skeleton_edit_donasi";
+
+export default function EditDonasiNew() {
+   const router = useRouter();
+   const [isLoading, setLoading] = useState(false);
+   const [data, setData] = useState<MODEL_DONASI>();
+   const [kategori, setKategori] = useState<any[]>([]);
+   const [durasi, setDurasi] = useState<any[]>([]);
+   const [file, setFile] = useState<File | null>(null);
+   const [updateImage, setUpdateImage] = useState<any | null>();
+   const [newTarget, setNewTarget] = useState("");
+   const [loadingMaster, setLoadingMaster] = useState(true)
+   const param = useParams<{ id: string }>();
+   const [loadingData, setLoadingData] = useState(true)
+
+
+   async function onGetMaster() {
+      try {
+         setLoadingMaster(true)
+         const responseKategori = await apiGetMasterDonasi("?cat=kategori")
+         const responseDurasi = await apiGetMasterDonasi("?cat=durasi")
+         if (responseKategori.success) {
+            setKategori(responseKategori.data)
+         }
+         if (responseDurasi.success) {
+            setDurasi(responseDurasi.data)
+         }
+      } catch (error) {
+         console.log(error);
+      } finally {
+         setLoadingMaster(false)
+      }
+   }
+
+   async function onGetData() {
+      try {
+         setLoadingData(true)
+         const response = await apiGetOneDonasiById(param.id)
+         if (response.success) {
+            setData(response.data)
+         }
+
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingData(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      onGetMaster()
+      onGetData()
+   }, [])
+
+   async function onUpdate() {
+      setLoading(true);
+      const body = {
+         id: data?.id,
+         donasiMaster_KategoriId: data?.DonasiMaster_Ketegori.id,
+         donasiMaster_DurasiId: data?.DonasiMaster_Durasi.id,
+         title: data?.title,
+         target: data?.target,
+      };
+
+      if (_.values(body).includes(""))
+         return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
+
+      try {
+         if (file !== null) {
+            const uploadImage = await funGlobal_UploadToStorage({
+               file: file as File,
+               dirId: DIRECTORY_ID.donasi_image,
+            });
+            if (!uploadImage.success) {
+               setLoading(false);
+               ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+            }
+
+            const deleteImage = await funGlobal_DeleteFileById({
+               fileId: String(data?.imageId),
+            });
+            if (!deleteImage.success) {
+               setLoading(false);
+               ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+            }
+
+            const res = await Donasi_funUpdateDonasi({
+               data: body as any,
+               fileId: uploadImage.data.id,
+            });
+            if (res.status === 200) {
+               ComponentGlobal_NotifikasiBerhasil(res.message);
+               router.back();
+               setLoading(false);
+            } else {
+               ComponentGlobal_NotifikasiPeringatan(res.message);
+               setLoading(false);
+            }
+         } else {
+            const res = await Donasi_funUpdateDonasi({
+               data: body as any,
+            });
+            if (res.status === 200) {
+               ComponentGlobal_NotifikasiBerhasil(res.message);
+               router.back();
+               setLoading(false);
+            } else {
+               ComponentGlobal_NotifikasiPeringatan(res.message);
+               setLoading(false);
+            }
+         }
+      } catch (error) {
+         console.log(error);
+      }
+   }
+
+   return (
+      <>
+         {
+            loadingData ? <SkeletonEditDonasi />
+               :
+               <Stack spacing={"md"} px={"sm"}>
+                  <Select
+                     styles={{
+                        label: {
+                           color: "white",
+                        },
+                     }}
+                     label="Kategori"
+                     placeholder={loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"}
+                     value={data?.DonasiMaster_Ketegori.id}
+                     withAsterisk
+                     data={kategori.map((e) => ({
+                        value: e.id,
+                        label: e.name,
+                     }))}
+                     onChange={(val) =>
+                        setData({
+                           ...(data as any),
+                           DonasiMaster_Ketegori: {
+                              id: val,
+                           },
+                        })
+                     }
+                  />
+
+                  <Stack>
+                     <ComponentGlobal_BoxUploadImage>
+                        {updateImage ? (
+                           <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                              <Image
+                                 style={{ maxHeight: 250 }}
+                                 alt="Foto"
+                                 height={250}
+                                 src={updateImage}
+                              />
+                           </AspectRatio>
+                        ) : (
+                           <Stack align="center" justify="center" p={"xs"} h={"100%"}>
+                              <ComponentGlobal_LoadImageCustom
+                                 fileId={String(data?.imageId)}
+                                 height={200}
+                              />
+                           </Stack>
+                        )}
+                     </ComponentGlobal_BoxUploadImage>
+
+                     <Center>
+                        <FileButton
+                           onChange={async (files: any | null) => {
+                              try {
+                                 const buffer = URL.createObjectURL(
+                                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                                 );
+
+                                 setUpdateImage(buffer);
+                                 setFile(files);
+                              } catch (error) {
+                                 console.log(error);
+                              }
+                           }}
+                           accept="image/png,image/jpeg"
+                        >
+                           {(props) => (
+                              <Button
+                                 {...props}
+                                 radius={"xl"}
+                                 leftIcon={<IconCamera />}
+                                 bg={MainColor.yellow}
+                                 color="yellow"
+                                 c={"black"}
+                              >
+                                 Upload
+                              </Button>
+                           )}
+                        </FileButton>
+                     </Center>
+                  </Stack>
+
+                  <Stack>
+                     <TextInput
+                        styles={{
+                           label: {
+                              color: "white",
+                           },
+                        }}
+                        withAsterisk
+                        label="Judul Donasi"
+                        placeholder="Contoh: Renovasi Masjid pada kampung, dll"
+                        value={data?.title}
+                        maxLength={100}
+                        error={
+                           data?.title === "" ? (
+                              <ComponentGlobal_ErrorInput text="Masukan judul" />
+                           ) : (
+                              ""
+                           )
+                        }
+                        onChange={(val) =>
+                           setData({
+                              ...data as any,
+                              title: val.target.value,
+                           })
+                        }
+                     />
+
+                     <TextInput
+                        styles={{
+                           label: {
+                              color: "white",
+                           },
+                        }}
+                        icon={<Text fw={"bold"}>Rp.</Text>}
+                        min={0}
+                        withAsterisk
+                        label="Target Dana"
+                        placeholder="0"
+                        value={newTarget ? newTarget : data?.target}
+                        error={
+                           data?.target === "" || data?.target === "0" ? (
+                              <ComponentGlobal_ErrorInput text="Masukan target dana" />
+                           ) : (
+                              ""
+                           )
+                        }
+                        onChange={(val) => {
+                           const match = val.currentTarget.value
+                              .replace(/\./g, "")
+                              .match(/^[0-9]+$/);
+
+                           if (val.currentTarget.value === "") {
+                              setData({
+                                 ...data as any,
+                                 target: 0 + "",
+                              });
+                              setNewTarget("0");
+                           }
+
+                           if (!match?.[0]) return null;
+
+                           const nilai = val.currentTarget.value.replace(/\./g, "");
+                           const target = Intl.NumberFormat("id-ID").format(+nilai);
+
+                           setNewTarget(target);
+
+                           setData({
+                              ...data as any,
+                              target: nilai,
+                           });
+                        }}
+                     />
+                     <Select
+                        styles={{
+                           label: {
+                              color: "white",
+                           },
+                        }}
+                        label="Durasi"
+                        placeholder={loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"}
+                        withAsterisk
+                        value={data?.DonasiMaster_Durasi.id}
+                        data={durasi.map((e) => ({
+                           value: e.id,
+                           label: e.name + " " + `hari`,
+                        }))}
+                        onChange={(val) =>
+                           setData({
+                              ...(data as any),
+                              DonasiMaster_Durasi: {
+                                 id: val,
+                              },
+                           })
+                        }
+                     />
+                  </Stack>
+                  <Button
+                     style={{
+                        transition: "0.5s",
+                     }}
+                     disabled={data?.title === "" || data?.target === "0" ? true : false}
+                     loaderPosition="center"
+                     loading={isLoading ? true : false}
+                     my={"lg"}
+                     radius={"xl"}
+                     onClick={() => {
+                        onUpdate();
+                     }}
+                     bg={MainColor.yellow}
+                     color="yellow"
+                     c={"black"}
+                  >
+                     Update
+                  </Button>
+               </Stack>
+
+         }
+
+      </>
+   );
+}
diff --git a/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx b/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
new file mode 100644
index 00000000..922e275e
--- /dev/null
+++ b/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
@@ -0,0 +1,23 @@
+import { Box, Skeleton, Stack } from "@mantine/core";
+
+export default function SkeletonEditDonasi() {
+   return (
+      <>
+         <Box>
+            <Stack align="center" mb={40}>
+               <Skeleton height={40} width={"100%"} />
+               <Skeleton height={300} width={"100%"} my={"xs"} />
+               <Skeleton height={40} width={"40%"} radius={"lg"} />
+            </Stack>
+
+            <Stack align="center">
+               {[...Array(5)].map((_, index) => (
+                  <Skeleton key={index} height={40} width={"100%"} my={"xs"} />
+               ))}
+               <Skeleton height={40} width={"100%"} radius={"lg"} mt={30} />
+            </Stack>
+         </Box>
+
+      </>
+   );
+}
\ No newline at end of file
diff --git a/src/app_modules/donasi/index.ts b/src/app_modules/donasi/index.ts
index f5d776c2..65fde92b 100644
--- a/src/app_modules/donasi/index.ts
+++ b/src/app_modules/donasi/index.ts
@@ -50,6 +50,7 @@ import Donasi_CreateKabar from "./create/create_kabar";
 import LayoutDonasi_CreateKabar from "./create/create_kabar/layout";
 import Donasi_EditRekening from "./edit/edit_rekening";
 import LayoutDonasi_EditRekening from "./edit/edit_rekening/layout";
+import EditDonasiNew from "./edit/edit_donasi/edit_donasi_new";
 export { LayoutDonasi_BuktiTransfer } from "./detail/detail_main/bukti_transfer";
 
 export {
@@ -104,5 +105,6 @@ export {
   LayoutDonasi_EditRekening,
   MainDonasiNew,
   GalangDanaDonasiNew,
-  CreateDonasiNew
+  CreateDonasiNew,
+  EditDonasiNew
 };
diff --git a/src/app_modules/donasi/lib/api_donasi.ts b/src/app_modules/donasi/lib/api_donasi.ts
index 2f7e719e..b42ce605 100644
--- a/src/app_modules/donasi/lib/api_donasi.ts
+++ b/src/app_modules/donasi/lib/api_donasi.ts
@@ -11,4 +11,9 @@ export const apiGetMasterDonasi = async (path?: string) => {
 export const apiGetAllDonasiSaya = async (path?: string) => {
    const response = await fetch(`/api/new/donasi/invoice${(path) ? path : ''}`)
    return await response.json().catch(() => null)
+}
+
+export const apiGetOneDonasiById = async (path: string) => {
+   const response = await fetch(`/api/new/donasi/${path}`)
+   return await response.json().catch(() => null)
 }
\ No newline at end of file