diff --git a/src/app/dev/donasi/create/create_donasi/page.tsx b/src/app/dev/donasi/create/create_donasi/page.tsx
index aef24090..0b0aef8c 100644
--- a/src/app/dev/donasi/create/create_donasi/page.tsx
+++ b/src/app/dev/donasi/create/create_donasi/page.tsx
@@ -1,12 +1,5 @@
 import { CreateDonasiNew } from "@/app_modules/donasi";
 
-
 export default async function Page() {
-  // const masterKategori = await Donasi_getMasterKategori();
-  // const masterDurasi = await Donasi_getMasterDurasi();
-
-  return (
-    // <CreateDonasi masterKategori={masterKategori} masterDurasi={masterDurasi} />
-    <CreateDonasiNew />
-  );
+  return <CreateDonasiNew />;
 }
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 923fdcf9..c99d7fab 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,8 @@
-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()
+import { EditDonasiNew } from "@/app_modules/donasi";
 
+export default async function Page() {
   return (
     <>
-      {/* <EditDonasi dataDonasi={dataDonasi as any} masterKategori={masterKategori} masterDurasi={masterDurasi} /> */}
       <EditDonasiNew />
     </>
   );
diff --git a/src/app_modules/donasi/create/create_cerita_penggalang.tsx b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
index d8bf22e6..4ae490e3 100644
--- a/src/app_modules/donasi/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -1,9 +1,13 @@
 "use client";
 
 import { DIRECTORY_ID } from "@/app/lib";
+import { IRealtimeData } from "@/app/lib/global_state";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
@@ -11,27 +15,25 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { clientLogger } from "@/util/clientLogger";
 import {
   AspectRatio,
   Button,
-  FileButton,
-  Group,
+  Center,
   Image,
   Stack,
-  Text,
   TextInput,
-  Textarea,
+  Textarea
 } from "@mantine/core";
-import { IconCamera, IconUpload } from "@tabler/icons-react";
+import { IconPhoto } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
-import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
-import { MODEL_DONASI_TEMPORARY } from "../model/interface";
-import { IRealtimeData } from "@/app/lib/global_state";
 import { WibuRealtime } from "wibu-pkg";
+import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
+import { gs_donasi_hot_menu } from "../global_state";
+import { MODEL_DONASI_TEMPORARY } from "../model/interface";
 
 export default function CreateCeritaPenggalangDonasi({
   dataTemporary,
@@ -80,9 +82,11 @@ export default function CreateCeritaPenggalangDonasi({
         file: file as File,
         dirId: DIRECTORY_ID.donasi_cerita_image,
       });
+
       if (!uploadImage.success) {
         setLoading(false);
-        return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+        return;
       }
 
       const res = await Donasi_funCreate({
@@ -122,21 +126,21 @@ export default function CreateCeritaPenggalangDonasi({
             scroll: false,
           });
         }
-        setLoading(false);
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
         setLoading(false);
       }
     } catch (error) {
-      console.log(error);
+      setLoading(false);
+      clientLogger.error("Error create cerita donasi", error);
     }
   }
   return (
     <>
-      <Stack spacing={50} px={"xl"} py={"md"}>
+      <Stack spacing={50} px={"xl"} pb={"md"}>
         {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
         <Stack spacing={"sm"}>
-          <ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
+          <ComponentGlobal_BoxInformation informasi="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
 
           <Stack spacing={5}>
             <Textarea
@@ -145,10 +149,10 @@ export default function CreateCeritaPenggalangDonasi({
                   color: MainColor.white,
                 },
                 input: {
-                  backgroundColor: MainColor.white
+                  backgroundColor: MainColor.white,
                 },
                 required: {
-                  color: MainColor.red
+                  color: MainColor.red,
                 },
               }}
               autosize
@@ -157,7 +161,7 @@ export default function CreateCeritaPenggalangDonasi({
               withAsterisk
               label="Pembukaan"
               placeholder="Pembuka cerita"
-              maxLength={300}
+              maxLength={500}
               onChange={(val) =>
                 setData({
                   ...data,
@@ -166,7 +170,7 @@ export default function CreateCeritaPenggalangDonasi({
               }
             />
             <ComponentGlobal_InputCountDown
-              maxInput={300}
+              maxInput={500}
               lengthInput={data.pembukaan.length}
             />
           </Stack>
@@ -178,10 +182,10 @@ export default function CreateCeritaPenggalangDonasi({
                   color: MainColor.white,
                 },
                 input: {
-                  backgroundColor: MainColor.white
+                  backgroundColor: MainColor.white,
                 },
                 required: {
-                  color: MainColor.red
+                  color: MainColor.red,
                 },
               }}
               autosize
@@ -190,7 +194,7 @@ export default function CreateCeritaPenggalangDonasi({
               withAsterisk
               label="Cerita"
               placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
-              maxLength={300}
+              maxLength={1000}
               onChange={(val) =>
                 setData({
                   ...data,
@@ -199,7 +203,7 @@ export default function CreateCeritaPenggalangDonasi({
               }
             />
             <ComponentGlobal_InputCountDown
-              maxInput={300}
+              maxInput={1000}
               lengthInput={data.cerita.length}
             />
           </Stack>
@@ -217,59 +221,33 @@ export default function CreateCeritaPenggalangDonasi({
                 </AspectRatio>
               ) : (
                 <Stack justify="center" align="center" h={"100%"}>
-                  <IconUpload color={MainColor.white} />
-                  <Text fz={10} fs={"italic"} c={MainColor.white} fw={"bold"}>
-                    Upload Gambar
-                  </Text>
+                  <IconPhoto size={100} />
                 </Stack>
               )}
             </ComponentGlobal_BoxUploadImage>
 
             {/* Upload Foto */}
-            <Group position="center">
-              <FileButton
-                onChange={async (files: any) => {
-                  try {
-                    const buffer = URL.createObjectURL(
-                      new Blob([new Uint8Array(await files.arrayBuffer())])
-                    );
-                    setImg(buffer);
-                    setFile(files);
-                  } catch (error) {
-                    console.log(error);
-                  }
-                }}
-                accept="image/png,image/jpeg"
-              >
-                {(props) => (
-                  <Button
-                    {...props}
-                    leftIcon={<IconCamera color="black" />}
-                    radius={50}
-                    bg={MainColor.yellow}
-                    color="yellow"
-                    c={"black"}
-                  >
-                    Upload Gambar
-                  </Button>
-                )}
-              </FileButton>
-            </Group>
+            <Center>
+              <ComponentGlobal_ButtonUploadFileImage
+                onSetFile={setFile}
+                onSetImage={setImg}
+              />
+            </Center>
           </Stack>
         </Stack>
 
         <Stack spacing={"sm"}>
-          <ComponentGlobal_BoxInformation informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
+          <ComponentGlobal_BoxInformation informasi="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
           <TextInput
             styles={{
               label: {
                 color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
               },
             }}
             withAsterisk
@@ -289,10 +267,10 @@ export default function CreateCeritaPenggalangDonasi({
                 color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
               },
             }}
             withAsterisk
diff --git a/src/app_modules/donasi/create/create_donasi_new.tsx b/src/app_modules/donasi/create/create_donasi_new.tsx
index 6558957e..b71cc940 100644
--- a/src/app_modules/donasi/create/create_donasi_new.tsx
+++ b/src/app_modules/donasi/create/create_donasi_new.tsx
@@ -2,13 +2,26 @@
 import { DIRECTORY_ID } from "@/app/lib";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { AspectRatio, Button, FileButton, Group, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
-import { IconCamera, IconUpload } from "@tabler/icons-react";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  Image,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconPhoto } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -16,279 +29,290 @@ import { useState } from "react";
 import Donasi_funCreateTemporary from "../fun/create/fun_create_donasi_temporary";
 import { gs_donasi_tabs_posting } from "../global_state";
 import { apiGetMasterDonasi } from "../lib/api_donasi";
-import { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function CreateDonasiNew() {
-   const router = useRouter();
-   const [loadingMaster, setLoadingMaster] = useState(true)
-   const [isLoading, setLoading] = useState(false);
-   const [kategori, setKategori] = useState<any[]>([]);
-   const [durasi, setDurasi] = useState<any[]>([]);
-   const [data, setData] = useState({
-      kategoriId: "",
-      title: "",
-      target: "",
-      durasiId: "",
-   });
-   const [targetDana, setTargetDana] = useState("");
-   const [file, setFile] = useState<File | null>(null);
-   const [img, setImg] = useState<any | null>();
-   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
-      gs_donasi_tabs_posting
-   );
+  const router = useRouter();
+  const [loadingMaster, setLoadingMaster] = useState(true);
+  const [isLoading, setLoading] = useState(false);
+  const [kategori, setKategori] = useState<any[]>([]);
+  const [durasi, setDurasi] = useState<any[]>([]);
+  const [data, setData] = useState({
+    kategoriId: "",
+    title: "",
+    target: "",
+    durasiId: "",
+  });
+  const [targetDana, setTargetDana] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [img, setImg] = useState<any | null>();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
 
-   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 onGetMaster() {
+    try {
+      setLoadingMaster(true);
+      const responseKategori = await apiGetMasterDonasi("?cat=kategori");
+      const responseDurasi = await apiGetMasterDonasi("?cat=durasi");
+      if (responseKategori.success) {
+        setKategori(responseKategori.data);
       }
-   }
-
-   useShallowEffect(() => {
-      onGetMaster()
-   }, [])
-
-   async function onCreate() {
-      const body = {
-         donasiMaster_KategoriId: data.kategoriId,
-         donasiMaster_DurasiId: data.durasiId,
-         title: data.title,
-         target: targetDana,
-      };
-
-      if (_.values(body).includes(""))
-         return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
-
-      try {
-         setLoading(true);
-
-         const uploadImage = await funGlobal_UploadToStorage({
-            file: file as File,
-            dirId: DIRECTORY_ID.donasi_image,
-         });
-         if (!uploadImage.success) {
-            setLoading(false);
-            return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
-         }
-
-         const res = await Donasi_funCreateTemporary({
-            data: body as any,
-            fileId: uploadImage.data.id,
-         });
-         if (res.status === 201) {
-            setTabsPostingDonasi("Review");
-            router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
-         } else {
-            ComponentGlobal_NotifikasiGagal(res.message);
-            setLoading(false);
-         }
-      } catch (error) {
-         console.log(error);
+      if (responseDurasi.success) {
+        setDurasi(responseDurasi.data);
       }
-   }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingMaster(false);
+    }
+  }
 
-   return (
-      <>
-         <Stack spacing={"md"} px={"xl"}>
-            <ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
-            <Select
-               styles={{
-                  label: {
-                     color: MainColor.white,
-                  },
-                  input: {
-                     backgroundColor: MainColor.white
-                  },
-                  required: {
-                     color: MainColor.red
-                  },
-                  dropdown: {
-                     backgroundColor: MainColor.white
-                  }
-               }}
-               label="Kategori"
-               placeholder={loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"}
-               withAsterisk
-               data={kategori.map((e) => ({
-                  value: e.id,
-                  label: e.name,
-               }))}
-               onChange={(val: string) =>
-                  setData({
-                     ...data,
-                     kategoriId: val,
-                  })
-               }
+  useShallowEffect(() => {
+    onGetMaster();
+  }, []);
+
+  async function onCreate() {
+    const body = {
+      donasiMaster_KategoriId: data.kategoriId,
+      donasiMaster_DurasiId: data.durasiId,
+      title: data.title,
+      target: targetDana,
+    };
+
+    if (_.values(body).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
+
+    try {
+      setLoading(true);
+      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");
+        return;
+      }
+
+      const res = await Donasi_funCreateTemporary({
+        data: body as any,
+        fileId: uploadImage.data.id,
+      });
+
+      if (res.status === 201) {
+        setTabsPostingDonasi("Review");
+        router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error create donasi", error);
+    }
+  }
+
+  return (
+    <>
+      <Stack spacing={"md"} px={"xl"}>
+        <ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+        <Select
+          styles={{
+            label: {
+              color: MainColor.white,
+            },
+            input: {
+              backgroundColor: MainColor.white,
+            },
+            required: {
+              color: MainColor.red,
+            },
+            dropdown: {
+              backgroundColor: MainColor.white,
+            },
+          }}
+          label="Kategori"
+          placeholder={
+            loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"
+          }
+          withAsterisk
+          data={kategori.map((e) => ({
+            value: e.id,
+            label: e.name,
+          }))}
+          onChange={(val: string) =>
+            setData({
+              ...data,
+              kategoriId: val,
+            })
+          }
+        />
+
+        <Stack>
+          <TextInput
+            styles={{
+              label: {
+                color: MainColor.white,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              },
+            }}
+            withAsterisk
+            label="Judul Donasi"
+            placeholder="Contoh: Renovasi Masjid pada kampung, dll"
+            maxLength={100}
+            onChange={(val) => {
+              setData({ ...data, title: val.target.value });
+            }}
+          />
+          <TextInput
+            styles={{
+              label: {
+                color: MainColor.white,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              },
+            }}
+            icon={<Text fw={"bold"}>Rp.</Text>}
+            min={0}
+            withAsterisk
+            label="Target Dana"
+            placeholder="0"
+            value={data.target}
+            onChange={(val) => {
+              const match = val.currentTarget.value
+                .replace(/\./g, "")
+                .match(/^[0-9]+$/);
+
+              if (val.currentTarget.value === "")
+                return setData({
+                  ...data,
+                  target: 0 + "",
+                });
+              if (!match?.[0]) return null;
+
+              const nilai = val.currentTarget.value.replace(/\./g, "");
+              const target = Intl.NumberFormat("id-ID").format(+nilai);
+
+              setTargetDana(nilai);
+              setData({
+                ...data,
+                target,
+              });
+            }}
+          />
+          <Select
+            styles={{
+              label: {
+                color: MainColor.white,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              },
+              dropdown: {
+                backgroundColor: MainColor.white,
+              },
+            }}
+            label="Durasi"
+            placeholder={
+              loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"
+            }
+            withAsterisk
+            data={durasi.map((e) => ({
+              value: e.id,
+              label: e.name + " " + `hari`,
+            }))}
+            onChange={(val: string) => setData({ ...data, durasiId: val })}
+          />
+        </Stack>
+
+        <Stack>
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250 }}
+                  alt="Foto"
+                  height={250}
+                  src={img}
+                />
+              </AspectRatio>
+            ) : (
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconPhoto size={100} />
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
+          <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFile}
+              onSetImage={setImg}
             />
+          </Center>
 
-            <Stack>
-               <TextInput
-                  styles={{
-                     label: {
-                        color: MainColor.white,
-                     },
-                     input: {
-                        backgroundColor: MainColor.white
-                     },
-                     required: {
-                        color: MainColor.red
-                     }
-                  }}
-                  withAsterisk
-                  label="Judul Donasi"
-                  placeholder="Contoh: Renovasi Masjid pada kampung, dll"
-                  maxLength={100}
-                  onChange={(val) => {
-                     setData({ ...data, title: val.target.value });
-                  }}
-               />
-               <TextInput
-                  styles={{
-                     label: {
-                        color: MainColor.white,
-                     },
-                     input: {
-                        backgroundColor: MainColor.white
-                     },
-                     required: {
-                        color: MainColor.red
-                     }
-                  }}
-                  icon={<Text fw={"bold"}>Rp.</Text>}
-                  min={0}
-                  withAsterisk
-                  label="Target Dana"
-                  placeholder="0"
-                  value={data.target}
-                  onChange={(val) => {
-                     const match = val.currentTarget.value
-                        .replace(/\./g, "")
-                        .match(/^[0-9]+$/);
-
-                     if (val.currentTarget.value === "")
-                        return setData({
-                           ...data,
-                           target: 0 + "",
-                        });
-                     if (!match?.[0]) return null;
-
-                     const nilai = val.currentTarget.value.replace(/\./g, "");
-                     const target = Intl.NumberFormat("id-ID").format(+nilai);
-
-                     setTargetDana(nilai);
-                     setData({
-                        ...data,
-                        target,
-                     });
-                  }}
-               />
-               <Select
-                  styles={{
-                     label: {
-                        color: MainColor.white
-                     },
-                     input: {
-                        backgroundColor: MainColor.white
-                     },
-                     required: {
-                        color: MainColor.red
-                     },
-                     dropdown: {
-                        backgroundColor: MainColor.white
-                     }
-                  }}
-                  label="Durasi"
-                  placeholder={loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"}
-                  withAsterisk
-                  data={durasi.map((e) => ({
-                     value: e.id,
-                     label: e.name + " " + `hari`,
-                  }))}
-                  onChange={(val: string) => setData({ ...data, durasiId: val })}
-               />
-            </Stack>
-
-            <Stack>
-               <ComponentGlobal_BoxUploadImage>
-                  {img ? (
-                     <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
-                        <Image
-                           style={{ maxHeight: 250 }}
-                           alt="Foto"
-                           height={250}
-                           src={img}
-                        />
-                     </AspectRatio>
-                  ) : (
-                     <Stack justify="center" align="center" h={"100%"}>
-                        <IconUpload color={MainColor.white} />
-                        <Text fz={10} fs={"italic"} c={MainColor.white} fw={"bold"}>
-                           Upload Gambar
-                        </Text>
-                     </Stack>
-                  )}
-               </ComponentGlobal_BoxUploadImage>
-
-               {/* Upload Foto */}
-               <Group position="center">
-                  <FileButton
-                     onChange={async (files: any) => {
-                        try {
-                           const buffer = URL.createObjectURL(
-                              new Blob([new Uint8Array(await files.arrayBuffer())])
-                           );
-                           setImg(buffer);
-                           setFile(files);
-                        } catch (error) {
-                           console.log(error);
-                        }
-                     }}
-                     accept="image/png,image/jpeg"
-                  >
-                     {(props) => (
-                        <Button
-                           {...props}
-                           leftIcon={<IconCamera color="black" />}
-                           radius={50}
-                           bg={MainColor.yellow}
-                           color="yellow"
-                           c={"black"}
-                        >
-                           Upload Gambar
-                        </Button>
-                     )}
-                  </FileButton>
-               </Group>
-            </Stack>
-
-            <Button
-               style={{
-                  transition: "0.5s",
-               }}
-               disabled={_.values(data).includes("") || file === null ? true : false}
-               loaderPosition="center"
-               loading={isLoading ? true : false}
-               my={"lg"}
-               radius={"xl"}
-               onClick={() => onCreate()}
-               bg={MainColor.yellow}
-               color="yellow"
-               c={"black"}
+          {/* Upload Foto */}
+          {/* <Group position="center">
+            <FileButton
+              onChange={async (files: any) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  setImg(buffer);
+                  setFile(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
             >
-               Selanjutnya
-            </Button>
-         </Stack>
-      </>
-   );
+              {(props) => (
+                <Button
+                  {...props}
+                  leftIcon={<IconCamera color="black" />}
+                  radius={50}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload Gambar
+                </Button>
+              )}
+            </FileButton>
+          </Group> */}
+        </Stack>
+
+        <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={_.values(data).includes("") || !file}
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          my={"lg"}
+          radius={"xl"}
+          onClick={() => onCreate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+        >
+          Selanjutnya
+        </Button>
+      </Stack>
+    </>
+  );
 }
diff --git a/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx b/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
index 055fd056..f6e681f9 100644
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
@@ -4,6 +4,7 @@ import { DIRECTORY_ID } from "@/app/lib";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
   ComponentGlobal_LoadImageCustom,
 } from "@/app_modules/_global/component";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
@@ -15,16 +16,15 @@ import {
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { clientLogger } from "@/util/clientLogger";
 import {
   AspectRatio,
   Button,
   Center,
-  FileButton,
   Image,
   Stack,
   Textarea,
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -60,9 +60,11 @@ export default function EditCeritaPenggalangDonasi({
           file: file as File,
           dirId: DIRECTORY_ID.donasi_cerita_image,
         });
+
         if (!uploadImage.success) {
           setLoading(false);
           ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+          return;
         }
 
         const deleteImage = await funGlobal_DeleteFileById({
@@ -70,7 +72,7 @@ export default function EditCeritaPenggalangDonasi({
         });
         if (!deleteImage.success) {
           setLoading(false);
-          ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+          clientLogger.error("Gagal hapus gambar lama");
         }
 
         const res = await Donasi_funUpdateCerita({
@@ -80,7 +82,6 @@ export default function EditCeritaPenggalangDonasi({
         if (res.status === 200) {
           ComponentGlobal_NotifikasiBerhasil(res.message);
           router.back();
-          setLoading(false);
         } else {
           ComponentGlobal_NotifikasiGagal(res.message);
           setLoading(false);
@@ -93,14 +94,14 @@ export default function EditCeritaPenggalangDonasi({
         if (res.status === 200) {
           ComponentGlobal_NotifikasiBerhasil(res.message);
           router.back();
-          setLoading(false);
         } else {
           ComponentGlobal_NotifikasiGagal(res.message);
           setLoading(false);
         }
       }
     } catch (error) {
-      console.log(error);
+      setLoading(false);
+      clientLogger.error("Error update cerita penggalangan", error);
     }
   }
 
@@ -114,6 +115,7 @@ export default function EditCeritaPenggalangDonasi({
                 color: "white",
               },
             }}
+            maxLength={500}
             autosize
             minRows={2}
             maxRows={7}
@@ -137,11 +139,11 @@ export default function EditCeritaPenggalangDonasi({
           />
           <ComponentGlobal_InputCountDown
             lengthInput={data.pembukaan.length}
-            maxInput={300}
+            maxInput={500}
           />
         </Stack>
 
-        <Stack>
+        <Stack spacing={0}>
           <ComponentGlobal_BoxUploadImage>
             {updateImage ? (
               <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
@@ -163,34 +165,10 @@ export default function EditCeritaPenggalangDonasi({
           </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>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFile}
+              onSetImage={setUpdateImage}
+            />
           </Center>
         </Stack>
 
@@ -201,6 +179,7 @@ export default function EditCeritaPenggalangDonasi({
                 color: "white",
               },
             }}
+            maxLength={1000}
             autosize
             minRows={2}
             maxRows={7}
@@ -224,11 +203,12 @@ export default function EditCeritaPenggalangDonasi({
           />
           <ComponentGlobal_InputCountDown
             lengthInput={data.cerita.length}
-            maxInput={300}
+            maxInput={1000}
           />
         </Stack>
 
         <Button
+          my={"lg"}
           style={{
             transition: "0.5s",
           }}
@@ -247,7 +227,6 @@ export default function EditCeritaPenggalangDonasi({
           Update
         </Button>
       </Stack>
-      {/* <pre> {JSON.stringify(value.pembukaan, null, 2)}</pre> */}
     </>
   );
 }
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
index 28041831..c79c3d0f 100644
--- a/src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx
@@ -1,13 +1,32 @@
 "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_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+  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 {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  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";
@@ -17,171 +36,183 @@ 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)
+  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 onGetMaster() {
+    try {
+      setLoadingMaster(true);
+      const responseKategori = await apiGetMasterDonasi("?cat=kategori");
+      const responseDurasi = await apiGetMasterDonasi("?cat=durasi");
+      if (responseKategori.success) {
+        setKategori(responseKategori.data);
       }
-   }
-
-   async function onGetData() {
-      try {
-         setLoadingData(true)
-         const response = await apiGetOneDonasiById(param.id, "semua")
-         if (response.success) {
-            setData(response.data)
-         }
-
-      } catch (error) {
-         console.error(error);
-      } finally {
-         setLoadingData(false)
+      if (responseDurasi.success) {
+        setDurasi(responseDurasi.data);
       }
-   }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingMaster(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);
+  async function onGetData() {
+    try {
+      setLoadingData(true);
+      const response = await apiGetOneDonasiById(param.id, "semua");
+      if (response.success) {
+        setData(response.data);
       }
-   }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoadingData(false);
+    }
+  }
 
-   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,
-                           },
-                        })
-                     }
+  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");
+          return;
+        }
+
+        const deleteImage = await funGlobal_DeleteFileById({
+          fileId: String(data?.imageId),
+          dirId: DIRECTORY_ID.donasi_image,
+        });
+
+        if (!deleteImage.success) {
+          setLoading(false);
+          clientLogger.error("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();
+        } 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();
+        } else {
+          ComponentGlobal_NotifikasiPeringatan(res.message);
+          setLoading(false);
+        }
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error update data donasi", 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>
 
-                  <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>
+              <ComponentGlobal_ButtonUploadFileImage
+                onSetFile={setFile}
+                onSetImage={setUpdateImage}
+              />
+            </Center>
 
-                     <Center>
+            {/* <Center>
                         <FileButton
                            onChange={async (files: any | null) => {
                               try {
@@ -210,127 +241,127 @@ export default function EditDonasiNew() {
                               </Button>
                            )}
                         </FileButton>
-                     </Center>
-                  </Stack>
+                     </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,
-                           })
-                        }
-                     />
+          <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]+$/);
+            <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 (val.currentTarget.value === "") {
+                  setData({
+                    ...(data as any),
+                    target: 0 + "",
+                  });
+                  setNewTarget("0");
+                }
 
-                           if (!match?.[0]) return null;
+                if (!match?.[0]) return null;
 
-                           const nilai = val.currentTarget.value.replace(/\./g, "");
-                           const target = Intl.NumberFormat("id-ID").format(+nilai);
+                const nilai = val.currentTarget.value.replace(/\./g, "");
+                const target = Intl.NumberFormat("id-ID").format(+nilai);
 
-                           setNewTarget(target);
+                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>
-
-         }
-
-      </>
-   );
+                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
index e073fcc9..aad5aace 100644
--- a/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
@@ -12,10 +12,10 @@ export default function SkeletonEditDonasi() {
             </Stack>
 
             <Stack align="center">
-               {[...Array(5)].map((_, index) => (
+               {[...Array(3)].map((_, index) => (
                   <CustomSkeleton key={index} height={40} width={"100%"} my={"xs"} />
                ))}
-               <CustomSkeleton height={40} width={"100%"} radius={"lg"} mt={30} />
+               <CustomSkeleton height={40} width={"100%"} radius={"xl"} mt={30} />
             </Stack>
          </Box>
 
diff --git a/src/app_modules/donasi/proses_donasi/invoice/index.tsx b/src/app_modules/donasi/proses_donasi/invoice/index.tsx
index 9ae48559..3fe5f122 100644
--- a/src/app_modules/donasi/proses_donasi/invoice/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/index.tsx
@@ -33,6 +33,8 @@ import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
 import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
 import { gs_donasi_hot_menu } from "../../global_state";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
 
 export default function Donasi_InvoiceProses({
   dataInvoice,
@@ -55,7 +57,8 @@ export default function Donasi_InvoiceProses({
 
       if (!uploadImage.success) {
         setLoading(false);
-        return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+        return;
       }
 
       const res = await Donasi_funUpdateStatusInvoice({
@@ -64,15 +67,6 @@ export default function Donasi_InvoiceProses({
         fileId: uploadImage.data.id,
       });
       if (res.status === 200) {
-        // const dataNotif: any = {
-        //   appId: res.data?.Donasi?.id as any,
-        //   userId: res.data?.Donasi?.authorId as any,
-        //   pesan: res.data?.Donasi?.title as any,
-        //   status: res.data?.DonasiMaster_StatusInvoice?.name,
-        //   kategoriApp: "DONASI",
-        //   title: "Donatur melakukan transfer",
-        // };
-
         const dataNotifikasi: IRealtimeData = {
           appId: res.data?.Donasi?.id as any,
           status: res.data?.DonasiMaster_StatusInvoice?.name as any,
@@ -87,22 +81,22 @@ export default function Donasi_InvoiceProses({
         });
 
         if (notif.status === 201) {
-           WibuRealtime.setData({
-             type: "notification",
-             pushNotificationTo: "ADMIN",
-           });
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "ADMIN",
+          });
 
           ComponentGlobal_NotifikasiBerhasil(res.message);
           setActive(2);
           router.push(RouterDonasi.proses_transaksi + `${invoice.id}`);
-          setLoading(false);
         }
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
         setLoading(false);
       }
     } catch (error) {
-      console.log(error);
+      setLoading(false);
+      clientLogger.error("Error upload data invoice", error);
     }
   }
 
@@ -259,35 +253,9 @@ export default function Donasi_InvoiceProses({
         >
           <Stack spacing={"sm"}>
             <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    // const buffer = URL.createObjectURL(
-                    //   new Blob([new Uint8Array(await files.arrayBuffer())])
-                    // );
-                    // console.log(buffer, "ini 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>
+              <ComponentGlobal_ButtonUploadFileImage onSetFile={setFile} />
             </Center>
+
             {file ? (
               <Center>
                 <Group spacing={"xs"}>
diff --git a/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx b/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
index 710dae87..aaa884ab 100644
--- a/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
@@ -17,6 +17,7 @@ import { useState } from "react";
 import { Donasi_funCreateInvoice } from "../../fun/create/fun_create_invoice";
 import { gs_donasi_hot_menu, gs_proses_donasi } from "../../global_state";
 import { WibuRealtime } from "wibu-pkg";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Donasi_MetodePembayaran({
   listBank,
@@ -35,47 +36,51 @@ export default function Donasi_MetodePembayaran({
   const [activeHotMenu, setActiveHotMenu] = useAtom(gs_donasi_hot_menu);
 
   async function onProses() {
-    const body = {
-      donasiId: donasiId,
-      donasiMaster_BankId: pilihBank,
-      nominal: prosesDonasi.nominal,
-      authorId: authorId,
-    };
-
-
-    const res = await Donasi_funCreateInvoice(body);
-    if (res.status === 200) {
-
-      const dataNotifikasi: IRealtimeData = {
-        appId: res.data?.Donasi?.id as any,
-        status: res.data?.DonasiMaster_StatusInvoice?.name as any,
-        userId: res.data?.Donasi?.authorId as any,
-        pesan: res.data?.Donasi?.title as any,
-        kategoriApp: "DONASI",
-        title: "Donatur membuat invoice donasi",
+    try {
+      setLoading(true);
+      const body = {
+        donasiId: donasiId,
+        donasiMaster_BankId: pilihBank,
+        nominal: prosesDonasi.nominal,
+        authorId: authorId,
       };
 
-      const notif = await notifikasiToAdmin_funCreate({
-        data: dataNotifikasi as any,
-      });
+      const res = await Donasi_funCreateInvoice(body);
+      if (res.status === 200) {
+        const dataNotifikasi: IRealtimeData = {
+          appId: res.data?.Donasi?.id as any,
+          status: res.data?.DonasiMaster_StatusInvoice?.name as any,
+          userId: res.data?.Donasi?.authorId as any,
+          pesan: res.data?.Donasi?.title as any,
+          kategoriApp: "DONASI",
+          title: "Donatur membuat invoice donasi",
+        };
 
-      if (notif.status === 201) {
-        WibuRealtime.setData({
-          type: "notification",
-          pushNotificationTo: "ADMIN",
+        const notif = await notifikasiToAdmin_funCreate({
+          data: dataNotifikasi as any,
         });
 
-        setLoading(true);
-        setActiveHotMenu(2);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        setProsesDonasi({
-          ...prosesDonasi,
-          nominal: "",
-        });
-        router.push(RouterDonasi.invoice + `${res.data?.id}`);
+        if (notif.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "ADMIN",
+          });
+
+          setActiveHotMenu(2);
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          setProsesDonasi({
+            ...prosesDonasi,
+            nominal: "",
+          });
+          router.push(RouterDonasi.invoice + `${res.data?.id}`);
+        }
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error proses donasi:", error);
     }
   }
 
diff --git a/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts b/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts
index c7bda3e1..b3809973 100644
--- a/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts
+++ b/src/app_modules/notifikasi/fun/create/create_notif_to_admin.ts
@@ -8,7 +8,6 @@ export default async function notifikasiToAdmin_funCreate({
 }: {
   data: MODEL_NOTIFIKASI;
 }) {
-
   const getAdmin = await prisma.user.findMany({
     where: {
       active: true,