diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 3a6deb3e..b34a52cf 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -25,6 +25,7 @@ model User {
   TransaksiInvestasi TransaksiInvestasi[]
   Donasi             Donasi[]
   Donasi_Invoice     Donasi_Invoice[]
+  Donasi_Notif       Donasi_Notif[]
 }
 
 model MasterUserRole {
@@ -77,6 +78,8 @@ model Images {
   CeritaDonasi           Donasi_Cerita[]
   Donasi_TemporaryCreate Donasi_TemporaryCreate[]
   Donasi_Kabar           Donasi_Kabar[]
+  Donasi_PencairanDana   Donasi_PencairanDana[]
+  Donasi_Invoice         Donasi_Invoice[]
 }
 
 model Katalog {
@@ -275,18 +278,22 @@ model MasterStatusTransaksiInvestasi {
   TransaksiInvestasi TransaksiInvestasi[]
 }
 
-// -------------------- DONASI --------------------- //
+/// ---------------------------------------- DONASI ----------------------------------------- //
 model Donasi {
-  id          String    @id @default(cuid())
-  title       String
-  target      String
-  active      Boolean   @default(true)
-  createdAt   DateTime  @default(now())
-  updatedAt   DateTime  @updatedAt
-  publishTime DateTime?
-  catatan     String?
-  progres     String?   @default("0")
-  terkumpul   String?   @default("0")
+  id                 String    @id @default(cuid())
+  title              String
+  target             String
+  active             Boolean   @default(true)
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  publishTime        DateTime?
+  catatan            String?
+  progres            String?   @default("0")
+  terkumpul          String?   @default("0")
+  namaBank           String?
+  rekening           String?
+  akumulasiPencairan Int?      @default(0)
+  totalPencairan     Int?      @default(0)
 
   Author                      User?                      @relation(fields: [authorId], references: [id])
   authorId                    String?
@@ -301,6 +308,7 @@ model Donasi {
   donasiMaster_StatusDonasiId String?                    @default("2")
   Donasi_Invoice              Donasi_Invoice[]
   Donasi_Kabar                Donasi_Kabar[]
+  Donasi_PencairanDana        Donasi_PencairanDana[]
 }
 
 model Donasi_TemporaryCreate {
@@ -395,6 +403,8 @@ model Donasi_Invoice {
   donasiMaster_StatusInvoiceId String?                     @default("3")
   Author                       User?                       @relation(fields: [authorId], references: [id])
   authorId                     String?
+  Images                       Images?                     @relation(fields: [imagesId], references: [id])
+  imagesId                     String?
 }
 
 model Donasi_Kabar {
@@ -405,8 +415,36 @@ model Donasi_Kabar {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  Donasi      Donasi? @relation(fields: [donasiId], references: [id])
+  Donasi       Donasi?        @relation(fields: [donasiId], references: [id])
+  donasiId     String?
+  ImagesKabar  Images?        @relation(fields: [imagesId], references: [id])
+  imagesId     String?
+  Donasi_Notif Donasi_Notif[]
+}
+
+model Donasi_Notif {
+  id        String   @id @default(cuid())
+  isRead    Boolean  @default(false)
+  active    Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  User           User?         @relation(fields: [userId], references: [id])
+  userId         String?
+  Donasi_Kabar   Donasi_Kabar? @relation(fields: [donasi_KabarId], references: [id])
+  donasi_KabarId String?
+}
+
+model Donasi_PencairanDana {
+  id          String   @id @default(cuid())
+  nominalCair Int
+  title       String
+  deskripsi   String
+  active      Boolean  @default(true)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  Donasi      Donasi?  @relation(fields: [donasiId], references: [id])
   donasiId    String?
-  ImagesKabar Images? @relation(fields: [imagesId], references: [id])
+  Images      Images?  @relation(fields: [imagesId], references: [id])
   imagesId    String?
 }
diff --git a/public/donasi/image/26f9f9ae-d099-4136-bb43-7d0a96770b55.jpeg b/public/donasi/image/26f9f9ae-d099-4136-bb43-7d0a96770b55.jpeg
new file mode 100644
index 00000000..00b4469e
Binary files /dev/null and b/public/donasi/image/26f9f9ae-d099-4136-bb43-7d0a96770b55.jpeg differ
diff --git a/public/donasi/image/7d8d0898-4c8a-470f-afde-755d6133425f.jpeg b/public/donasi/image/7d8d0898-4c8a-470f-afde-755d6133425f.jpeg
deleted file mode 100644
index d3ea1214..00000000
Binary files a/public/donasi/image/7d8d0898-4c8a-470f-afde-755d6133425f.jpeg and /dev/null differ
diff --git a/public/donasi/image/f0345442-d9c0-47e8-8639-51147548bdd5.jpg b/public/donasi/image/f0345442-d9c0-47e8-8639-51147548bdd5.jpg
deleted file mode 100644
index b71d094e..00000000
Binary files a/public/donasi/image/f0345442-d9c0-47e8-8639-51147548bdd5.jpg and /dev/null differ
diff --git a/public/donasi/image_cerita/0e1cee5c-6dd7-4024-b2d8-16da46421f17.jpg b/public/donasi/image_cerita/0e1cee5c-6dd7-4024-b2d8-16da46421f17.jpg
deleted file mode 100644
index b71d094e..00000000
Binary files a/public/donasi/image_cerita/0e1cee5c-6dd7-4024-b2d8-16da46421f17.jpg and /dev/null differ
diff --git a/public/donasi/image_cerita/6e4f0cd6-ab03-4f2a-8cda-cc066f31775c.jpeg b/public/donasi/image_cerita/6e4f0cd6-ab03-4f2a-8cda-cc066f31775c.jpeg
new file mode 100644
index 00000000..8830cea2
Binary files /dev/null and b/public/donasi/image_cerita/6e4f0cd6-ab03-4f2a-8cda-cc066f31775c.jpeg differ
diff --git a/public/donasi/image_cerita/ffdb4c10-df64-404c-8b0a-cea952324119.jpeg b/public/donasi/image_cerita/ffdb4c10-df64-404c-8b0a-cea952324119.jpeg
deleted file mode 100644
index 4f712802..00000000
Binary files a/public/donasi/image_cerita/ffdb4c10-df64-404c-8b0a-cea952324119.jpeg and /dev/null differ
diff --git a/public/donasi/invoice/144ba2ba-67df-4014-92fd-f51f1a14d290.png b/public/donasi/invoice/144ba2ba-67df-4014-92fd-f51f1a14d290.png
new file mode 100644
index 00000000..827976fd
Binary files /dev/null and b/public/donasi/invoice/144ba2ba-67df-4014-92fd-f51f1a14d290.png differ
diff --git a/public/donasi/invoice/589732ad-0e8a-4273-bc27-707f01b1e4d0.png b/public/donasi/invoice/589732ad-0e8a-4273-bc27-707f01b1e4d0.png
new file mode 100644
index 00000000..827976fd
Binary files /dev/null and b/public/donasi/invoice/589732ad-0e8a-4273-bc27-707f01b1e4d0.png differ
diff --git a/public/donasi/invoice/8afa3968-fec7-49f9-8bba-d81d5f7ceb01.png b/public/donasi/invoice/8afa3968-fec7-49f9-8bba-d81d5f7ceb01.png
new file mode 100644
index 00000000..6f356546
Binary files /dev/null and b/public/donasi/invoice/8afa3968-fec7-49f9-8bba-d81d5f7ceb01.png differ
diff --git a/public/donasi/invoice/cd319bc0-09e5-4322-b924-43b1f0e619ff.png b/public/donasi/invoice/cd319bc0-09e5-4322-b924-43b1f0e619ff.png
new file mode 100644
index 00000000..6f356546
Binary files /dev/null and b/public/donasi/invoice/cd319bc0-09e5-4322-b924-43b1f0e619ff.png differ
diff --git a/public/donasi/kabar/2cfa3076-f9dd-43d2-b9fb-3ecd37b852a8.jpeg b/public/donasi/kabar/2cfa3076-f9dd-43d2-b9fb-3ecd37b852a8.jpeg
new file mode 100644
index 00000000..df5b1ada
Binary files /dev/null and b/public/donasi/kabar/2cfa3076-f9dd-43d2-b9fb-3ecd37b852a8.jpeg differ
diff --git a/public/donasi/pencairan/1c43100c-05bc-4234-b308-db06171cd188.jpg b/public/donasi/pencairan/1c43100c-05bc-4234-b308-db06171cd188.jpg
new file mode 100644
index 00000000..ea83eb05
Binary files /dev/null and b/public/donasi/pencairan/1c43100c-05bc-4234-b308-db06171cd188.jpg differ
diff --git a/public/donasi/pencairan/92bb3b55-19e9-4676-9b2e-633d7fe9fa70.jpg b/public/donasi/pencairan/92bb3b55-19e9-4676-9b2e-633d7fe9fa70.jpg
new file mode 100644
index 00000000..9bb96f9b
Binary files /dev/null and b/public/donasi/pencairan/92bb3b55-19e9-4676-9b2e-633d7fe9fa70.jpg differ
diff --git a/public/donasi/pencairan/9ed489e4-056e-41d8-be75-faf7107f9a60.jpg b/public/donasi/pencairan/9ed489e4-056e-41d8-be75-faf7107f9a60.jpg
new file mode 100644
index 00000000..1b3756ff
Binary files /dev/null and b/public/donasi/pencairan/9ed489e4-056e-41d8-be75-faf7107f9a60.jpg differ
diff --git a/src/app/api/donasi/gambar_bukti_transfer/[id]/route.ts b/src/app/api/donasi/gambar_bukti_transfer/[id]/route.ts
new file mode 100644
index 00000000..c560690a
--- /dev/null
+++ b/src/app/api/donasi/gambar_bukti_transfer/[id]/route.ts
@@ -0,0 +1,32 @@
+import prisma from "@/app/lib/prisma";
+import fs from "fs";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const get = await prisma.images.findUnique({
+    where: {
+      id: params.id,
+    },
+    select: {
+      url: true,
+    },
+  });
+
+  if (!fs.existsSync(`./public/donasi/invoice/${get?.url}`)) {
+    const notFile = fs.readFileSync("./public/aset/global/no_img.png");
+    return new NextResponse(notFile, {
+      headers: {
+        "Content-Type": "image/png",
+      },
+    });
+  }
+  const file = fs.readFileSync(`./public/donasi/invoice/${get?.url}`);
+  return new NextResponse(file, {
+    headers: {
+      "Content-Type": "image/png",
+    },
+  });
+}
diff --git a/src/app/api/donasi/gambar_pencairan/[id]/route.ts b/src/app/api/donasi/gambar_pencairan/[id]/route.ts
new file mode 100644
index 00000000..69ff5739
--- /dev/null
+++ b/src/app/api/donasi/gambar_pencairan/[id]/route.ts
@@ -0,0 +1,34 @@
+import prisma from "@/app/lib/prisma";
+import fs from "fs";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+
+  const get = await prisma.images.findUnique({
+    where: {
+      id: params.id,
+    },
+    select: {
+      url: true,
+    },
+  });
+
+
+  if (!fs.existsSync(`./public/donasi/pencairan/${get?.url}`)) {
+    const notFile = fs.readFileSync("./public/aset/global/no_img.png");
+    return new NextResponse(notFile, {
+      headers: {
+        "Content-Type": "image/png",
+      },
+    });
+  }
+  const file = fs.readFileSync(`./public/donasi/pencairan/${get?.url}`);
+  return new NextResponse(file, {
+    headers: {
+      "Content-Type": "image/png",
+    },
+  });
+}
diff --git a/src/app/dev/admin/donasi/detail/publish/[id]/page.tsx b/src/app/dev/admin/donasi/detail/publish/[id]/page.tsx
index 92dc9e47..dd094a1b 100644
--- a/src/app/dev/admin/donasi/detail/publish/[id]/page.tsx
+++ b/src/app/dev/admin/donasi/detail/publish/[id]/page.tsx
@@ -1,17 +1,24 @@
 import { AdminDonasi_DetailPublish } from "@/app_modules/admin/donasi";
 import { AdminDonasi_funCountDonatur } from "@/app_modules/admin/donasi/fun/count/fun_count_donatur";
 import { AdminDonasi_getListDonatur } from "@/app_modules/admin/donasi/fun/get/get_list_donatur_by_id";
-import { AdminDonasi_getById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
-
-export default async function Page({params}: {params: {id: string}}) {
-const dataPublish = await AdminDonasi_getById(params.id)
-const listDonatur = await AdminDonasi_getListDonatur(params.id) 
-const countDonatur = await AdminDonasi_funCountDonatur(params.id)
+import { AdminDonasi_getListPencairanDana } from "@/app_modules/admin/donasi/fun/get/get_list_pencairan_dana_by_id";
+import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
 
+export default async function Page({ params }: { params: { id: string } }) {
+  const dataPublish = await AdminDonasi_getOneById(params.id);
+  const listDonatur = await AdminDonasi_getListDonatur(params.id);
+  const countDonatur = await AdminDonasi_funCountDonatur(params.id);
+  const listPencairan = await AdminDonasi_getListPencairanDana(params.id);
+  // console.log(listDonatur)
 
   return (
     <>
-      <AdminDonasi_DetailPublish dataPublish={dataPublish as any} listDonatur={listDonatur} countDonatur={countDonatur} />
+      <AdminDonasi_DetailPublish
+        dataPublish={dataPublish as any}
+        listDonatur={listDonatur}
+        countDonatur={countDonatur}
+        listPencairan={listPencairan as any}
+      />
     </>
   );
 }
diff --git a/src/app/dev/admin/donasi/detail/reject/[id]/page.tsx b/src/app/dev/admin/donasi/detail/reject/[id]/page.tsx
index 5e42cc3c..515f1c91 100644
--- a/src/app/dev/admin/donasi/detail/reject/[id]/page.tsx
+++ b/src/app/dev/admin/donasi/detail/reject/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { AdminDonasi_DetailReject } from "@/app_modules/admin/donasi";
-import { AdminDonasi_getById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
+import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const dataReject = await AdminDonasi_getById(params.id);
+  const dataReject = await AdminDonasi_getOneById(params.id);
 
   return (
     <>
diff --git a/src/app/dev/admin/donasi/detail/review/[id]/page.tsx b/src/app/dev/admin/donasi/detail/review/[id]/page.tsx
index 8dbbc3ce..4b8424f5 100644
--- a/src/app/dev/admin/donasi/detail/review/[id]/page.tsx
+++ b/src/app/dev/admin/donasi/detail/review/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { AdminDonasi_DetailReview } from "@/app_modules/admin/donasi";
-import { AdminDonasi_getById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
+import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
 
 export default async function Page({params}: {params: {id: string}}) {
     // console.log(params.id)
-    const dataReview = await AdminDonasi_getById(params.id)
+    const dataReview = await AdminDonasi_getOneById(params.id)
     // console.log(dataReview)
     return <AdminDonasi_DetailReview dataReview={dataReview as any}/>
 }
\ No newline at end of file
diff --git a/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx b/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx
new file mode 100644
index 00000000..0bba36b2
--- /dev/null
+++ b/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx
@@ -0,0 +1,6 @@
+import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let donasiId = params.id;
+  return <AdminDonasi_PencairanDana donasiId={donasiId} />;
+}
diff --git a/src/app/dev/admin/donasi/proses_transaksi/[id]/page.tsx b/src/app/dev/admin/donasi/proses_transaksi/[id]/page.tsx
index ee7d0a64..f6ed5bd6 100644
--- a/src/app/dev/admin/donasi/proses_transaksi/[id]/page.tsx
+++ b/src/app/dev/admin/donasi/proses_transaksi/[id]/page.tsx
@@ -1,4 +1,5 @@
-import AdminDonasi_ProsesTransaksi from "@/app_modules/admin/donasi/detail_table/publish/proses_transaksi";
+
+import { AdminDonasi_ProsesTransaksi } from "@/app_modules/admin/donasi";
 import { AdminDonasi_getListStatusInvoiceProses } from "@/app_modules/admin/donasi/fun/get/get_list_status_invoice_proses";
 
 export default async function Page({params}: {params: {id: string}}) {
diff --git a/src/app/dev/admin/donasi/table/publish/page.tsx b/src/app/dev/admin/donasi/table/publish/page.tsx
index c1d70e82..30945ac0 100644
--- a/src/app/dev/admin/donasi/table/publish/page.tsx
+++ b/src/app/dev/admin/donasi/table/publish/page.tsx
@@ -1,5 +1,5 @@
 import { AdminDonasi_TablePublish } from "@/app_modules/admin/donasi";
-import { AdminDonasi_getByStatus } from "@/app_modules/admin/donasi/fun/get/get_donasi_by_status";
+import { AdminDonasi_getByStatus } from "@/app_modules/admin/donasi/fun/get/get_list_donasi_by_status";
 
 export default async function Page() {
     const listPublish = await AdminDonasi_getByStatus("1")
diff --git a/src/app/dev/admin/donasi/table/reject/page.tsx b/src/app/dev/admin/donasi/table/reject/page.tsx
index 7a62da99..96a1cfe7 100644
--- a/src/app/dev/admin/donasi/table/reject/page.tsx
+++ b/src/app/dev/admin/donasi/table/reject/page.tsx
@@ -1,5 +1,5 @@
 import { AdminDonasi_TableReject } from "@/app_modules/admin/donasi";
-import { AdminDonasi_getByStatus } from "@/app_modules/admin/donasi/fun/get/get_donasi_by_status";
+import { AdminDonasi_getByStatus } from "@/app_modules/admin/donasi/fun/get/get_list_donasi_by_status";
 
 export default async function Page() {
     const dataReject = await AdminDonasi_getByStatus("4")
diff --git a/src/app/dev/admin/donasi/table/review/page.tsx b/src/app/dev/admin/donasi/table/review/page.tsx
index 8fa21952..25a2b40e 100644
--- a/src/app/dev/admin/donasi/table/review/page.tsx
+++ b/src/app/dev/admin/donasi/table/review/page.tsx
@@ -1,5 +1,5 @@
 import { AdminDonasi_TableReview } from "@/app_modules/admin/donasi";
-import { AdminDonasi_getByStatus } from "@/app_modules/admin/donasi/fun/get/get_donasi_by_status";
+import { AdminDonasi_getByStatus } from "@/app_modules/admin/donasi/fun/get/get_list_donasi_by_status";
 import { getToken_UserId } from "@/app_modules/fun/get_user_token";
 
 export default async function Page() {
diff --git a/src/app/dev/donasi/create/cerita_penggalang/[id]/layout.tsx b/src/app/dev/donasi/create/cerita_penggalang/[id]/layout.tsx
new file mode 100644
index 00000000..966bf13c
--- /dev/null
+++ b/src/app/dev/donasi/create/cerita_penggalang/[id]/layout.tsx
@@ -0,0 +1,14 @@
+import { LayoutCreateDonasi } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutCreateDonasi>{children}</LayoutCreateDonasi>
+    </>
+  );
+}
diff --git a/src/app/dev/donasi/detail/detail_kabar/layout.tsx b/src/app/dev/donasi/detail/detail_kabar/[id]/layout.tsx
similarity index 100%
rename from src/app/dev/donasi/detail/detail_kabar/layout.tsx
rename to src/app/dev/donasi/detail/detail_kabar/[id]/layout.tsx
diff --git a/src/app/dev/donasi/detail/detail_kabar/[id]/page.tsx b/src/app/dev/donasi/detail/detail_kabar/[id]/page.tsx
new file mode 100644
index 00000000..d67b5aec
--- /dev/null
+++ b/src/app/dev/donasi/detail/detail_kabar/[id]/page.tsx
@@ -0,0 +1,10 @@
+import { DetailKabarDonasi } from "@/app_modules/donasi";
+import { Donasi_getOneKabar } from "@/app_modules/donasi/fun/get/get_one_kabar";
+
+export default async function Page({params}: {params: {id: string}}) {
+
+    let kabarId = params.id
+    const dataDonasi = await Donasi_getOneKabar(kabarId)
+
+    return <DetailKabarDonasi dataDonasi={dataDonasi as any}/>
+}
\ No newline at end of file
diff --git a/src/app/dev/donasi/detail/detail_kabar/page.tsx b/src/app/dev/donasi/detail/detail_kabar/page.tsx
deleted file mode 100644
index 08d151f1..00000000
--- a/src/app/dev/donasi/detail/detail_kabar/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DetailKabarDonasi } from "@/app_modules/donasi";
-
-export default async function Page() {
-    return <DetailKabarDonasi/>
-}
\ No newline at end of file
diff --git a/src/app/dev/donasi/detail/detail_main/[id]/page.tsx b/src/app/dev/donasi/detail/detail_main/[id]/page.tsx
index 4854c65a..f0481634 100644
--- a/src/app/dev/donasi/detail/detail_main/[id]/page.tsx
+++ b/src/app/dev/donasi/detail/detail_main/[id]/page.tsx
@@ -1,16 +1,17 @@
 import { DetailMainDonasi } from "@/app_modules/donasi";
 import { Donasi_getCountDonatur } from "@/app_modules/donasi/fun/count/get_count_donatur";
 import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+import { getToken_UserId } from "@/app_modules/fun/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let donasiId = params.id;
   const dataDonasi = await Donasi_getOneById(donasiId);
   const countDonatur = await Donasi_getCountDonatur(donasiId)
-
+  const userLoginId = await getToken_UserId();
 
   return (
     <>
-      <DetailMainDonasi dataDonasi={dataDonasi as any} countDonatur={countDonatur} />
+      <DetailMainDonasi dataDonasi={dataDonasi as any} countDonatur={countDonatur} userLoginId={userLoginId}/>
     </>
   );
 }
diff --git a/src/app/dev/donasi/detail/detail_notif/[id]/layout.tsx b/src/app/dev/donasi/detail/detail_notif/[id]/layout.tsx
new file mode 100644
index 00000000..16392ec5
--- /dev/null
+++ b/src/app/dev/donasi/detail/detail_notif/[id]/layout.tsx
@@ -0,0 +1,22 @@
+import prisma from "@/app/lib/prisma";
+import { LayoutDonasi_DetailNotif } from "@/app_modules/donasi";
+import { Donasi_getOneKabar } from "@/app_modules/donasi/fun/get/get_one_kabar";
+import React from "react";
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { id: string };
+}) {
+  let kabarId = params.id;
+  const dataKabar = await Donasi_getOneKabar(kabarId);
+  const donasiId =  dataKabar?.donasiId
+
+  return (
+    <>
+      <LayoutDonasi_DetailNotif donasiId={donasiId as any}>{children}</LayoutDonasi_DetailNotif>
+    </>
+  );
+}
diff --git a/src/app/dev/donasi/detail/detail_notif/[id]/page.tsx b/src/app/dev/donasi/detail/detail_notif/[id]/page.tsx
new file mode 100644
index 00000000..33fb99a8
--- /dev/null
+++ b/src/app/dev/donasi/detail/detail_notif/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { Donasi_DetailNotif } from "@/app_modules/donasi";
+import { Donasi_getOneKabar } from "@/app_modules/donasi/fun/get/get_one_kabar";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let kabarId = params.id;
+  const dataKabar = await Donasi_getOneKabar(kabarId);
+
+  return <Donasi_DetailNotif dataKabar={dataKabar as any} />;
+}
diff --git a/src/app/dev/donasi/detail/detail_publish/[id]/page.tsx b/src/app/dev/donasi/detail/detail_publish/[id]/page.tsx
index 7bd4141a..3030a06c 100644
--- a/src/app/dev/donasi/detail/detail_publish/[id]/page.tsx
+++ b/src/app/dev/donasi/detail/detail_publish/[id]/page.tsx
@@ -1,14 +1,18 @@
 import { DetailPublishDonasi } from "@/app_modules/donasi";
 import { Donasi_getCountDonatur } from "@/app_modules/donasi/fun/count/get_count_donatur";
 import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+import { getToken_UserId } from "@/app_modules/fun/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const dataPublish = await Donasi_getOneById(params.id);
   const countDonatur= await Donasi_getCountDonatur(params.id)
+  const userLoginId = await getToken_UserId();
+
+  console.log(userLoginId)
 
   return (
     <>
-      <DetailPublishDonasi dataPublish={dataPublish as any} countDonatur={countDonatur} />
+      <DetailPublishDonasi dataPublish={dataPublish as any} countDonatur={countDonatur} userLoginId={userLoginId}/>
     </>
   );
 }
diff --git a/src/app/dev/donasi/edit/edit_rekening/[id]/layout.tsx b/src/app/dev/donasi/edit/edit_rekening/[id]/layout.tsx
new file mode 100644
index 00000000..faf5ce96
--- /dev/null
+++ b/src/app/dev/donasi/edit/edit_rekening/[id]/layout.tsx
@@ -0,0 +1,14 @@
+import { LayoutDonasi_EditRekening } from "@/app_modules/donasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDonasi_EditRekening>{children}</LayoutDonasi_EditRekening>
+    </>
+  );
+}
diff --git a/src/app/dev/donasi/edit/edit_rekening/[id]/page.tsx b/src/app/dev/donasi/edit/edit_rekening/[id]/page.tsx
new file mode 100644
index 00000000..69f198dc
--- /dev/null
+++ b/src/app/dev/donasi/edit/edit_rekening/[id]/page.tsx
@@ -0,0 +1,17 @@
+import { Donasi_EditRekening } from "@/app_modules/donasi";
+import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let donasiId = params.id;
+  const data = await Donasi_getOneById(donasiId);
+  const dataDonasi = {
+    id: data?.id,
+    namaBank: data?.namaBank,
+    rekening: data?.rekening,
+  };
+  return (
+    <>
+      <Donasi_EditRekening dataDonasi={dataDonasi as any} />
+    </>
+  );
+}
diff --git a/src/app/dev/donasi/main/layout.tsx b/src/app/dev/donasi/main/layout.tsx
index 15206dfa..55ee0210 100644
--- a/src/app/dev/donasi/main/layout.tsx
+++ b/src/app/dev/donasi/main/layout.tsx
@@ -1,8 +1,23 @@
 import { LayoutDonasi } from "@/app_modules/donasi";
+import { Donasi_getNotifByUserId } from "@/app_modules/donasi/fun/get/get_notif_by_user_id";
+import { getToken_UserId } from "@/app_modules/fun/get_user_token";
 import React from "react";
 
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return <>
-    <LayoutDonasi>{children}</LayoutDonasi>
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const userId = await getToken_UserId();
+  // const dataDonasi = await DOnasi_getList
+  const isRead = await Donasi_getNotifByUserId(userId).then((res) => res.map((val) => val.isRead))
+  // console.log(isRead)
+
+  return (
+    <>
+      <LayoutDonasi userId={userId} isRead={isRead as any}>
+        {children}
+      </LayoutDonasi>
     </>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/dev/donasi/notif_page/[id]/page.tsx b/src/app/dev/donasi/notif_page/[id]/page.tsx
index afb176ec..6274061e 100644
--- a/src/app/dev/donasi/notif_page/[id]/page.tsx
+++ b/src/app/dev/donasi/notif_page/[id]/page.tsx
@@ -1,9 +1,14 @@
 import { Donasi_NotifPage } from "@/app_modules/donasi";
+import { Donasi_getNotifByUserId } from "@/app_modules/donasi/fun/get/get_notif_by_user_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let userId = params.id;
+  const dataNotif = await Donasi_getNotifByUserId(userId);
+// console.log(dataNotif)
 
-export default async function Page() {
   return (
     <>
-      <Donasi_NotifPage />
+      <Donasi_NotifPage dataNotif={dataNotif as any} />
     </>
   );
 }
diff --git a/src/app/dev/donasi/pencairan_dana/layout.tsx b/src/app/dev/donasi/pencairan_dana/[id]/layout.tsx
similarity index 100%
rename from src/app/dev/donasi/pencairan_dana/layout.tsx
rename to src/app/dev/donasi/pencairan_dana/[id]/layout.tsx
diff --git a/src/app/dev/donasi/pencairan_dana/[id]/page.tsx b/src/app/dev/donasi/pencairan_dana/[id]/page.tsx
new file mode 100644
index 00000000..3256c8c2
--- /dev/null
+++ b/src/app/dev/donasi/pencairan_dana/[id]/page.tsx
@@ -0,0 +1,25 @@
+import { PencairanDanaDonasi } from "@/app_modules/donasi";
+import ComponentDonasi_LoaderOverlay from "@/app_modules/donasi/component/loader_overlay";
+import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
+import { Donasi_getListPencairanDanaById } from "@/app_modules/donasi/fun/get/get_list_pencairan_dana_by_id";
+import { Donasi_getTotalPencairanDanaById } from "@/app_modules/donasi/fun/get/get_pencairan_dana_by_id";
+import { getToken_UserId } from "@/app_modules/fun/get_user_token";
+import { Loader } from "@mantine/core";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let donasiId = params.id;
+  const totalAkumulasi = await Donasi_getTotalPencairanDanaById(donasiId);
+  const listPencairan = await Donasi_getListPencairanDanaById(donasiId);
+  
+
+  // if (authorId != totalAkumulasi?.authorId) return <><NotifPeringatan /></>
+  
+  return (
+    <>
+      <PencairanDanaDonasi
+        totalAkumulasi={totalAkumulasi as any}
+        listPencairan={listPencairan as any}
+      />
+    </>
+  );
+}
diff --git a/src/app/dev/donasi/pencairan_dana/page.tsx b/src/app/dev/donasi/pencairan_dana/page.tsx
deleted file mode 100644
index c45f962c..00000000
--- a/src/app/dev/donasi/pencairan_dana/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { PencairanDanaDonasi } from "@/app_modules/donasi";
-
-export default async function Page() {
-  return (
-    <>
-      <PencairanDanaDonasi />
-    </>
-  );
-}
diff --git a/src/app/lib/router_hipmi/router_admin.ts b/src/app/lib/router_hipmi/router_admin.ts
index 1c2f0b1b..273bf3e0 100644
--- a/src/app/lib/router_hipmi/router_admin.ts
+++ b/src/app/lib/router_hipmi/router_admin.ts
@@ -15,6 +15,10 @@ export const RouterAdminInvestasi = {
 };
 
 export const RouterAdminDonasi = {
+
+  api_gambar_bukti_transfer: "/api/donasi/gambar_bukti_transfer/",
+
+
   main_donasi: "/dev/admin/donasi/main",
   // table
   table_publish: "/dev/admin/donasi/table/publish",
@@ -28,7 +32,10 @@ export const RouterAdminDonasi = {
   detail_reject: "/dev/admin/donasi/detail/reject/",
 
   // proses
-  proses_transaksi: "/dev/admin/donasi/proses_transaksi/"
+  proses_transaksi: "/dev/admin/donasi/proses_transaksi/",
+  pencairan_dana :"/dev/admin/donasi/pencairan_dana/",
+
+
 
 
 
diff --git a/src/app/lib/router_hipmi/router_donasi.ts b/src/app/lib/router_hipmi/router_donasi.ts
index aeb14fbd..64636316 100644
--- a/src/app/lib/router_hipmi/router_donasi.ts
+++ b/src/app/lib/router_hipmi/router_donasi.ts
@@ -5,7 +5,7 @@ export const RouterDonasi = {
   api_image: "/api/donasi/image/",
   api_image_cerita: "/api/donasi/image_cerita/",
   api_gambar_kabar: "/api/donasi/gambar_kabar/",
-
+  api_gambar_pencairan: "/api/donasi/gambar_pencairan/",
 
   //main
   main_beranda: "/dev/donasi/main/beranda",
@@ -13,7 +13,7 @@ export const RouterDonasi = {
   main_donasi_saya: "/dev/donasi/main/donasi_saya",
 
   // create
-  create_donasi: "/dev/donasi/create_donasi",
+  create_donasi: "/dev/donasi/create/create_donasi",
   create_cerita_penggalang: "/dev/donasi/create/cerita_penggalang/",
   create_kabar: "/dev/donasi/create/create_kabar/",
 
@@ -21,34 +21,33 @@ export const RouterDonasi = {
   update_kabar: "/dev/donasi/edit/update_kabar/",
   edit_donasi: "/dev/donasi/edit/edit_donasi/",
   edit_cerita_penggalang: "/dev/donasi/edit/edit_cerita/",
+  edit_rekening: "/dev/donasi/edit/edit_rekening/",
 
   //pop up
   page_pop_up_create: "/dev/donasi/page_pop_up/create",
 
   //detail
   detail_main: "/dev/donasi/detail/detail_main/",
-  detail_kabar: "/dev/donasi/detail/detail_kabar",
+  detail_kabar: "/dev/donasi/detail/detail_kabar/",
   detail_publish: "/dev/donasi/detail/detail_publish/",
   detail_review: "/dev/donasi/detail/detail_review/",
   detail_draft: "/dev/donasi/detail/detail_draft/",
   detail_reject: "/dev/donasi/detail/detail_reject/",
   detail_donasi_saya: "/dev/donasi/detail/detail_donasi_saya/",
+  detail_notif: "/dev/donasi/detail/detail_notif/",
 
   //alur donasi
   donatur: "/dev/donasi/donatur/",
   kabar: "/dev/donasi/kabar/",
-  pencairan_dana: "/dev/donasi/pencairan_dana",
+  pencairan_dana: "/dev/donasi/pencairan_dana/",
   penggalang_dana: "/dev/donasi/penggalang_dana/",
   cerita_penggalang: "/dev/donasi/cerita_penggalang/",
   list_kabar: "/dev/donasi/list_kabar/",
-  notif_page:"/dev/donasi/notif_page/",
-  
+  notif_page: "/dev/donasi/notif_page/",
+
   // proses donasi
   masukan_donasi: "/dev/donasi/proses_donasi/masukan_donasi/",
   metode_pembayaran: "/dev/donasi/proses_donasi/metode_pembayaran/",
   invoice: "/dev/donasi/proses_donasi/invoice/",
   proses_transaksi: "/dev/donasi/proses_donasi/proses_transaksi/",
-
-
-
 };
diff --git a/src/app_modules/admin/donasi/component/tombol_kembali.tsx b/src/app_modules/admin/donasi/component/tombol_kembali.tsx
index 44139fb1..2630f979 100644
--- a/src/app_modules/admin/donasi/component/tombol_kembali.tsx
+++ b/src/app_modules/admin/donasi/component/tombol_kembali.tsx
@@ -4,7 +4,7 @@ import { Group, Button } from "@mantine/core";
 import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
-export default function AdminDonasi_TombolKembali() {
+export default function ComponentAdminDonasi_TombolKembali() {
   const router = useRouter();
   return (
     <>
diff --git a/src/app_modules/admin/donasi/detail_table/detail_reject.tsx b/src/app_modules/admin/donasi/detail_table/detail_reject.tsx
index b42b4335..a90cfe7a 100644
--- a/src/app_modules/admin/donasi/detail_table/detail_reject.tsx
+++ b/src/app_modules/admin/donasi/detail_table/detail_reject.tsx
@@ -7,16 +7,23 @@ import {
   Divider,
   Group,
   Image,
+  Modal,
   Paper,
   SimpleGrid,
   Stack,
   Text,
+  Textarea,
   Title,
 } from "@mantine/core";
 import { useState } from "react";
-import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import { useDisclosure } from "@mantine/hooks";
+import { AdminDonasi_funUpdateCatatanReject } from "../fun/update/fun_update_catatan_reject";
+import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
+import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
+import { AdminDonasi_getOneById } from "../fun/get/get_one_by_id";
 
 export default function AdminDonasi_DetailReject({
   dataReject,
@@ -28,7 +35,11 @@ export default function AdminDonasi_DetailReject({
   return (
     <>
       <Stack>
-        <ButtonOnHeader />
+        <ButtonOnHeader
+          catatan={donasi.catatan}
+          donasiId={donasi.id}
+          setDonasi={setDonasi}
+        />
         <SimpleGrid
           cols={2}
           spacing="lg"
@@ -46,18 +57,61 @@ export default function AdminDonasi_DetailReject({
   );
 }
 
-function ButtonOnHeader() {
+function ButtonOnHeader({
+  catatan,
+  donasiId,
+  setDonasi,
+}: {
+  catatan: string;
+  donasiId: string;
+  setDonasi: any;
+}) {
+  const [catat, setCatat] = useState(catatan);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onUpdate() {
+    await AdminDonasi_funUpdateCatatanReject(donasiId, catat).then(
+      async (res) => {
+        if (res.status === 200) {
+          NotifBerhasil(res.message);
+          close();
+          await AdminDonasi_getOneById(donasiId).then((res) => setDonasi(res));
+        } else {
+          NotifGagal(res.message);
+        }
+      }
+    );
+  }
+
   return (
     <>
       <Stack>
         <Group position="apart">
-          <AdminDonasi_TombolKembali />
-          <Button radius={"xl"} bg={"orange"} color="orange">
+          <ComponentAdminDonasi_TombolKembali />
+          <Button radius={"xl"} bg={"orange"} color="orange" onClick={open}>
             Tambah catatan
           </Button>
         </Group>
         <Divider />
       </Stack>
+      <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        title="Tambah catatan penolakan"
+      >
+        <Stack>
+          <Textarea
+            value={catat}
+            onChange={(val) => setCatat(val.target.value)}
+          />
+          <Group position="right">
+            <Button radius="xl" onClick={() => onUpdate()}>
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </>
   );
 }
diff --git a/src/app_modules/admin/donasi/detail_table/detail_review.tsx b/src/app_modules/admin/donasi/detail_table/detail_review.tsx
index 10ec7a54..94c52542 100644
--- a/src/app_modules/admin/donasi/detail_table/detail_review.tsx
+++ b/src/app_modules/admin/donasi/detail_table/detail_review.tsx
@@ -16,7 +16,7 @@ import {
   Textarea,
   Title,
 } from "@mantine/core";
-import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
@@ -95,7 +95,7 @@ function ButtonOnHeader({ donasi }: { donasi: MODEL_DONASI }) {
   return (
     <>
       <Group position="apart">
-        <AdminDonasi_TombolKembali />
+        <ComponentAdminDonasi_TombolKembali />
         <Group>
           <Button
             radius={"xl"}
diff --git a/src/app_modules/admin/donasi/detail_table/publish/detail_publish.tsx b/src/app_modules/admin/donasi/detail_table/publish/detail_publish.tsx
index f101e5e1..3d5e4986 100644
--- a/src/app_modules/admin/donasi/detail_table/publish/detail_publish.tsx
+++ b/src/app_modules/admin/donasi/detail_table/publish/detail_publish.tsx
@@ -10,17 +10,20 @@ import {
   Grid,
   Group,
   Image,
+  Modal,
   Pagination,
   Paper,
   Progress,
   ScrollArea,
   SimpleGrid,
+  Spoiler,
   Stack,
   Table,
   Text,
+  TextInput,
   Title,
 } from "@mantine/core";
-import AdminDonasi_TombolKembali from "../../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
   IconClover,
@@ -32,44 +35,50 @@ import moment from "moment";
 import {
   MODEL_DONASI,
   MODEL_DONASI_INVOICE,
+  MODEL_DONASI_PENCAIRAN_DANA,
 } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
 import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
-import { useInterval, useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useInterval, useShallowEffect } from "@mantine/hooks";
 import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
 
 export default function AdminDonasi_DetailPublish({
   dataPublish,
   listDonatur,
   countDonatur,
+  listPencairan,
 }: {
   dataPublish: MODEL_DONASI;
   listDonatur: any[];
   countDonatur: number;
+  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
 }) {
   const [donasi, setDonasi] = useState(dataPublish);
   const [donatur, setDoanutur] = useState(listDonatur);
   const interval = useInterval(() => reloadData(donasi.id), 5000);
+  const [pencairan, setPencairan] = useState(listPencairan);
 
   useShallowEffect(() => {
     interval.start();
   }, []);
 
   async function reloadData(donasiId: string) {
-    const data = await Donasi_getOneById(donasiId);
-   setDonasi(data as any)
+    const data = await AdminDonasi_getOneById(donasiId);
+    setDonasi(data as any);
     return data;
   }
   return (
     <>
-      {/* <pre>{JSON.stringify(donatur.map((e) => e), null, 2)}</pre> */}
+      {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
       <Stack>
-        <AdminDonasi_TombolKembali />
+        <ComponentAdminDonasi_TombolKembali />
         <TampilanDetailDonasi donasi={donasi} countDonatur={countDonatur} />
         <TampilanListDonatur donatur={donatur} donasi={donasi} />
+        <TampilanListPencairan pencairan={pencairan} />
       </Stack>
     </>
   );
@@ -82,14 +91,16 @@ function TampilanDetailDonasi({
   donasi: MODEL_DONASI;
   countDonatur: number;
 }) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const router = useRouter();
   return (
     <>
       <Paper radius={"md"} p={"md"}>
         <Stack>
           <Grid>
-            <Grid.Col span={6}>
+            <Grid.Col md={6} lg={4}>
               <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
+                <Paper radius={"md"} h={{ lg: 200, md: 200, sm: 200 }}>
                   <Image
                     alt="Foto"
                     src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
@@ -97,52 +108,134 @@ function TampilanDetailDonasi({
                 </Paper>
               </AspectRatio>
             </Grid.Col>
-            <Grid.Col span={6}>
-              <Stack spacing={7}>
-                <Title order={4}>{donasi.title}</Title>
-                <Text fz={"xs"}>
-                  Durasi: {donasi.DonasiMaster_Durasi.name} hari
-                </Text>
+            <Grid.Col md={6} lg={4}>
+              <Paper withBorder p={"sm"} mah={250} h={250}>
+                <Stack spacing={5}>
+                  <Title order={4}>{donasi.title}</Title>
+                  <Group>
+                    <Text fz={"xs"}>Penggalang Dana</Text>
+                    <Title order={5} c="blue">
+                      {donasi.Author.username}
+                    </Title>
+                  </Group>
+                  <Group>
+                    <Text fz={12}>Durasi</Text>
+                    <Title order={5} c="blue">
+                      {donasi.DonasiMaster_Durasi.name} hari
+                    </Title>
+                  </Group>
 
-                <Group>
-                  <Text fz={12}>Dana dibutuhkan</Text>
-                  <Title order={5} c="blue">
-                    <TampilanRupiahDonasi nominal={+donasi.target} />
-                  </Title>
-                </Group>
-                <Group>
-                  <Text fz={12}>Kategori</Text>
-                  <Title order={5} c="blue">
-                    {donasi.DonasiMaster_Ketegori.name}
-                  </Title>
-                </Group>
-                <Group>
-                  <Text fz={12}>Total donatur</Text>
-                  <Title order={5} c="blue">
-                    {countDonatur}
-                  </Title>
-                </Group>
-                <Group>
-                  <Text fz={12}>Progres</Text>
-                  <Title order={5} c="blue">
-                    {donasi.progres} %
-                  </Title>
-                </Group>
-                <Group>
-                  <Text fz={12}>Dana terkumpul</Text>
-                  <Title order={5} c="blue">
-                    <TampilanRupiahDonasi nominal={+donasi.terkumpul} />
-                  </Title>
-                </Group>
-              </Stack>
+                  <Group>
+                    <Text fz={12}>Dana dibutuhkan</Text>
+                    <Title order={5} c="blue">
+                      <TampilanRupiahDonasi nominal={+donasi.target} />
+                    </Title>
+                  </Group>
+                  <Group>
+                    <Text fz={12}>Kategori</Text>
+                    <Title order={5} c="blue">
+                      {donasi.DonasiMaster_Ketegori.name}
+                    </Title>
+                  </Group>
+                  <Group>
+                    <Text fz={12}>Total donatur</Text>
+                    <Title order={5} c="blue">
+                      {countDonatur}
+                    </Title>
+                  </Group>
+                  <Group>
+                    <Text fz={12}>Progres</Text>
+                    <Title order={5} c="blue">
+                      {donasi.progres} %
+                    </Title>
+                  </Group>
+                  <Group>
+                    <Text fz={12}>Dana terkumpul</Text>
+                    <Title order={5} c="blue">
+                      <TampilanRupiahDonasi nominal={+donasi.terkumpul} />
+                    </Title>
+                  </Group>
+                  {/* <Button w={200} bg={"green.5"} color="green">Pencairan Dana</Button> */}
+                </Stack>
+              </Paper>
+            </Grid.Col>
+
+            <Grid.Col md={6} lg={4}>
+              <Paper withBorder p={"sm"} mah={250} h={250}>
+                <Stack spacing={"xl"}>
+                  <Center>
+                    <Title order={4}>Pencairan Dana</Title>
+                  </Center>
+                  <Grid>
+                    <Grid.Col span={"auto"}>
+                      <Stack spacing={0}>
+                        <Text fz={"xs"}>Total Dana Dicairkan</Text>
+                        <Title>
+                          <TampilanRupiahDonasi
+                            nominal={donasi.totalPencairan}
+                            fontSize={14}
+                          />
+                        </Title>
+                      </Stack>
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Stack spacing={0}>
+                        <Text fz={"xs"}>Bank Tujuan</Text>
+                        <Title order={6}>{donasi.namaBank}</Title>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+                  <Grid>
+                    <Grid.Col span={"auto"}>
+                      <Stack spacing={0}>
+                        <Text fz={"xs"}>Akumulasi Pencairan</Text>
+                        <Title order={6}>
+                          {donasi.akumulasiPencairan} Kali
+                        </Title>
+                      </Stack>
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Stack spacing={0}>
+                        <Text fz={"xs"}>Nomor Rekening</Text>
+                        <Title order={6}>{donasi.rekening}</Title>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+
+                  <Button
+                    radius={"xl"}
+                    onClick={() =>
+                      router.push(
+                        RouterAdminDonasi.pencairan_dana + `${donasi.id}`
+                      )
+                    }
+                  >
+                    Cairkan Dana
+                  </Button>
+                </Stack>
+              </Paper>
             </Grid.Col>
           </Grid>
         </Stack>
       </Paper>
+      <Modal opened={opened} onClose={close} centered>
+        <PencairanDana />
+      </Modal>
     </>
   );
 }
 
+function PencairanDana() {
+  return (
+    <>
+      <Stack>
+        <TextInput label="Masukan nominal" />
+      </Stack>
+    </>
+  );
+}
+
+//######################## LIST DONATUR #####################//
 function TampilanListDonatur({
   donatur,
   donasi,
@@ -220,3 +313,94 @@ function TampilanListDonatur({
     </>
   );
 }
+
+//######################## LIST PENCAIRAN #####################//
+function TampilanListPencairan({
+  pencairan,
+}: {
+  pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
+}) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const [gambarId, setGambarId] = useState("");
+
+  const rowTable = pencairan.map((e) => (
+    <tr key={e.id}>
+      <td>
+        <TampilanRupiahDonasi nominal={e.nominalCair} />
+      </td>
+      <td>{moment(e.createdAt).format("ll")}</td>
+      <td>
+        <Text>{e.title}</Text>
+      </td>
+      <td width={500}>
+        <Box w={"100%"}>
+          <Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
+            {e.deskripsi}
+          </Spoiler>
+        </Box>
+      </td>
+      <td>
+        {
+          <Box>
+            <Center>
+              <Button
+                radius={"xl"}
+                compact
+                bg={"green"}
+                color="green"
+                onClick={() => {
+                  open();
+                  setGambarId(e.imagesId);
+                }}
+              >
+                Detail
+              </Button>
+            </Center>
+          </Box>
+        }
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Modal opened={opened} onClose={close} centered>
+        <AspectRatio ratio={9 / 16}>
+          <Image
+            src={RouterDonasi.api_gambar_pencairan + `${gambarId}`}
+            alt="Foto"
+          />
+        </AspectRatio>
+      </Modal>
+
+      <Stack p={"md"}>
+        <Title order={3}>Rincian Pencairan Dana</Title>
+        {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
+        {_.isEmpty(pencairan) ? (
+          <Paper bg={"gray.1"} p={"xs"}>
+            <Center>BELUM ADA PENCAIRAN DANA</Center>
+          </Paper>
+        ) : (
+          <Paper withBorder p={"xs"}>
+            <Table horizontalSpacing={"md"} verticalSpacing={"md"}>
+              <thead>
+                <tr>
+                  <th>Nominal</th>
+                  <th>Tanggal</th>
+                  <th>Judul</th>
+                  <th>
+                    <Center>Deskripsi</Center>
+                  </th>
+                  <th>
+                    <Center>Bukti Transfer</Center>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>{rowTable}</tbody>
+            </Table>
+          </Paper>
+        )}
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/donasi/detail_table/publish/pencairan_dana.tsx b/src/app_modules/admin/donasi/detail_table/publish/pencairan_dana.tsx
new file mode 100644
index 00000000..b11626df
--- /dev/null
+++ b/src/app_modules/admin/donasi/detail_table/publish/pencairan_dana.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import {
+  AspectRatio,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  NumberInput,
+  Paper,
+  Stack,
+  TextInput,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
+import { useState } from "react";
+import { IconCamera } from "@tabler/icons-react";
+import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
+import { useRouter } from "next/navigation";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { MODEL_DONASI_PENCAIRAN_DANA } from "@/app_modules/donasi/model/interface";
+import _ from "lodash";
+import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
+import { AdminDonasi_funCreatePencairanDana } from "../../fun/create/fun_create_pencairan_dana";
+import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
+import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
+import { AdminDonasi_AkumulasiPencairanById } from "../../fun/update/fun_update_akumulasi_pencairan";
+
+export default function AdminDonasi_PencairanDana({
+  donasiId,
+}: {
+  donasiId: string;
+}) {
+  const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [images, setImages] = useState<any | null>();
+  const [value, setValue] = useState({
+    title: "",
+    deskripsi: "",
+    nilai: "",
+  });
+  return (
+    <>
+      <Stack>
+        <ComponentAdminDonasi_TombolKembali />
+        <Center>
+          <Paper
+            p={"md"}
+            w={{ base: 200, sm: 200, md: 300, lg: 400 }}
+            withBorder
+          >
+            <Center mb={"lg"}>
+              <Title order={5}>Form Pencairan Dana</Title>
+            </Center>
+            <Stack>
+              <TextInput
+                withAsterisk
+                type="number"
+                placeholder="Masukan jumlah nominal"
+                label="Nominal"
+                onChange={(val) => {
+                  setValue({
+                    ...value,
+                    nilai: val.target.value,
+                  });
+                }}
+              />
+              <TextInput
+                withAsterisk
+                placeholder="Masukan judul"
+                label="Judul"
+                onChange={(val: any) => {
+                  setValue({
+                    ...value,
+                    title: val.target.value,
+                  });
+                }}
+              />
+              <Textarea
+                withAsterisk
+                placeholder="Masukan deskripsi"
+                label="Deskripsi"
+                onChange={(val: any) => {
+                  setValue({
+                    ...value,
+                    deskripsi: val.target.value,
+                  });
+                }}
+              />
+
+              <ComponentDonasi_NotedBox informasi="Wajib menyertakan bukti transfer" />
+              <Stack>
+                <Center>
+                  <FileButton
+                    onChange={async (files: any | null) => {
+                      try {
+                        const buffer = URL.createObjectURL(
+                          new Blob([new Uint8Array(await files.arrayBuffer())])
+                        );
+                        // console.log(buffer, "ini buffer");
+                        // console.log(files, " ini file");
+                        setImages(buffer);
+                        setFile(files);
+                      } catch (error) {
+                        console.log(error);
+                      }
+                    }}
+                    accept="image/png,image/jpeg"
+                  >
+                    {(props) => (
+                      <Button
+                        {...props}
+                        radius={"xl"}
+                        variant="outline"
+                        w={150}
+                        leftIcon={<IconCamera />}
+                        compact
+                      >
+                        Upload
+                      </Button>
+                    )}
+                  </FileButton>
+                </Center>
+                {images ? (
+                  <AspectRatio ratio={9 / 16}>
+                    <Paper radius={"md"} withBorder>
+                      <Image
+                        alt="Foto"
+                        src={images}
+                      />
+                    </Paper>
+                  </AspectRatio>
+                ) : (
+                  ""
+                )}
+              </Stack>
+              <Button
+                radius={"xl"}
+                mt={"lg"}
+                onClick={
+                  () => onSave(router, value, donasiId, file as any)
+                  // console.log(value)
+                }
+              >
+                Simpan
+              </Button>
+            </Stack>
+          </Paper>
+        </Center>
+      </Stack>
+    </>
+  );
+}
+
+async function onSave(
+  router: AppRouterInstance,
+  value: any,
+  donasiId: string,
+  file: FormData
+) {
+  const body = {
+    donasiId: donasiId,
+    nominalCair: value.nilai,
+    title: value.title,
+    deskripsi: value.deskripsi,
+  };
+
+  //   console.log(body);
+
+  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
+  if (!file) return NotifPeringatan("Lampirkan Bukti Transfer");
+
+  const gambar = new FormData();
+  gambar.append("file", file as any);
+
+  await AdminDonasi_funCreatePencairanDana(body as any, gambar).then(
+    async (res) => {
+      if (res.status === 200) {
+        await AdminDonasi_AkumulasiPencairanById(
+          body.donasiId as any,
+          body.nominalCair as any
+        ).then((res) => {
+          if (res.status === 200) {
+            NotifBerhasil(res.message);
+            router.back();
+          } else {
+            NotifGagal(res.message);
+          }
+        });
+      } else {
+        NotifGagal(res.message);
+      }
+    }
+  );
+}
diff --git a/src/app_modules/admin/donasi/detail_table/publish/proses_transaksi.tsx b/src/app_modules/admin/donasi/detail_table/publish/proses_transaksi.tsx
index bc11028a..225cf83d 100644
--- a/src/app_modules/admin/donasi/detail_table/publish/proses_transaksi.tsx
+++ b/src/app_modules/admin/donasi/detail_table/publish/proses_transaksi.tsx
@@ -2,18 +2,21 @@
 
 import {
   ActionIcon,
+  AspectRatio,
   Box,
   Button,
   Center,
   Group,
   HoverCard,
+  Image,
+  Modal,
   Paper,
   Stack,
   Table,
   Text,
   Title,
 } from "@mantine/core";
-import AdminDonasi_TombolKembali from "../../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
 import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
 import moment from "moment";
@@ -24,15 +27,17 @@ import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_b
 import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
 import { AdminDonasi_getListStatusInvoiceProses } from "../../fun/get/get_list_status_invoice_proses";
 import { AdminDonasi_funUpdateProgresDanTerkumpul } from "../../fun/update/fun_update_progres_dan_terkumpul";
+import { useDisclosure } from "@mantine/hooks";
+import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
 
 export default function AdminDonasi_ProsesTransaksi({
   listProses,
 }: {
   listProses: MODEL_DONASI_INVOICE[];
 }) {
-  const [invoice, setInvoice] = useState<MODEL_DONASI_INVOICE[] | any[]>(
-    listProses
-  );
+  const [invoice, setInvoice] = useState<MODEL_DONASI_INVOICE[]>(listProses);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [imageId, setImageId] = useState("");
 
   async function onClick(invoice: MODEL_DONASI_INVOICE) {
     let nominal: number = +invoice.nominal;
@@ -50,7 +55,7 @@ export default function AdminDonasi_ProsesTransaksi({
             if (res.status === 200) {
               await AdminDonasi_getListStatusInvoiceProses(
                 invoice.Donasi.id
-              ).then((res) => {
+              ).then((res: any) => {
                 setInvoice(res);
               });
             } else {
@@ -79,6 +84,20 @@ export default function AdminDonasi_ProsesTransaksi({
           <Button
             radius={"xl"}
             variant="outline"
+            onClick={() => {
+              open();
+              setImageId(e.imagesId);
+            }}
+          >
+            Lihat
+          </Button>
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Button
+            radius={"xl"}
+            variant="filled"
             color="green"
             onClick={() => onClick(e)}
           >
@@ -91,9 +110,12 @@ export default function AdminDonasi_ProsesTransaksi({
 
   return (
     <>
+      <Modal opened={opened} onClose={close} centered>
+        <ModalBuktiTransfer imageId={imageId} />
+      </Modal>
       {/* <pre>{JSON.stringify(invoice, null, 2)}</pre>  */}
       <Stack>
-        <AdminDonasi_TombolKembali />
+        <ComponentAdminDonasi_TombolKembali />
         <Stack>
           <HeaderPage />
 
@@ -107,6 +129,9 @@ export default function AdminDonasi_ProsesTransaksi({
                     <Center>Metode Pembayaran</Center>
                   </th>
                   <th>Tanggal</th>
+                  <th>
+                    <Center>Bukti Transfer</Center>
+                  </th>
                   <th>
                     <Center>Aksi</Center>
                   </th>
@@ -151,3 +176,16 @@ function HeaderPage() {
     </>
   );
 }
+
+function ModalBuktiTransfer({ imageId }: { imageId: string }) {
+  return (
+    <>
+      <AspectRatio ratio={9 / 16}>
+        <Image
+          alt="Foto"
+          src={RouterAdminDonasi.api_gambar_bukti_transfer + `${imageId}`}
+        />
+      </AspectRatio>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/donasi/fun/create/fun_create_pencairan_dana.tsx b/src/app_modules/admin/donasi/fun/create/fun_create_pencairan_dana.tsx
new file mode 100644
index 00000000..72e591eb
--- /dev/null
+++ b/src/app_modules/admin/donasi/fun/create/fun_create_pencairan_dana.tsx
@@ -0,0 +1,52 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_DONASI_PENCAIRAN_DANA } from "@/app_modules/donasi/model/interface";
+import _ from "lodash";
+import { v4 } from "uuid";
+import fs from "fs";
+import { revalidatePath } from "next/cache";
+
+export async function AdminDonasi_funCreatePencairanDana(
+  req: MODEL_DONASI_PENCAIRAN_DANA,
+  gambar: FormData
+) {
+  const dataImage: any = gambar.get("file");
+  const fileName = dataImage.name;
+  const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
+  const fRandomName = v4(fileName) + "." + fileExtension;
+
+  const uploadBukti = await prisma.images.create({
+    data: {
+      url: fRandomName,
+    },
+    select: {
+      id: true,
+      url: true,
+    },
+  });
+
+  if (!uploadBukti) return { status: 400, message: "Gagal upload gambar" };
+  const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
+  fs.writeFileSync(
+    `./public/donasi/pencairan/${uploadBukti.url}`,
+    uploadFolder
+  );
+
+  const createPencairan = await prisma.donasi_PencairanDana.create({
+    data: {
+      nominalCair: +req.nominalCair,
+      deskripsi: req.deskripsi,
+      title: req.title,
+      donasiId: req.donasiId,
+      imagesId: uploadBukti.id
+    },
+  });
+
+  if (!createPencairan) return { status: 400, message: "Gagal membuat data" };
+  revalidatePath("/dev/admin/donasi/detail/publish");
+  return {
+    status: 200,
+    message: "Berhasil",
+  };
+}
diff --git a/src/app_modules/admin/donasi/fun/get/get_donasi_by_status.ts b/src/app_modules/admin/donasi/fun/get/get_list_donasi_by_status.ts
similarity index 80%
rename from src/app_modules/admin/donasi/fun/get/get_donasi_by_status.ts
rename to src/app_modules/admin/donasi/fun/get/get_list_donasi_by_status.ts
index 7017c7f9..a64c5684 100644
--- a/src/app_modules/admin/donasi/fun/get/get_donasi_by_status.ts
+++ b/src/app_modules/admin/donasi/fun/get/get_list_donasi_by_status.ts
@@ -4,7 +4,10 @@ import prisma from "@/app/lib/prisma";
 
 export async function AdminDonasi_getByStatus(status: string) {
   if (status === "1") {
-    const getReview = await prisma.donasi.findMany({
+    const getPublish = await prisma.donasi.findMany({
+      orderBy: {
+        createdAt: "desc",
+      },
       where: {
         donasiMaster_StatusDonasiId: "1",
       },
@@ -12,24 +15,25 @@ export async function AdminDonasi_getByStatus(status: string) {
         id: true,
         title: true,
         target: true,
-        active: true,
-        createdAt: true,
-        updatedAt: true,
-        publishTime: true,
+        // active: true,
+        // createdAt: true,
+        // updatedAt: true,
+        // publishTime: true,
         authorId: true,
-        imagesId: true,
-        donasiMaster_KategoriId: true,
-        donasiMaster_DurasiId: true,
-        donasiMaster_StatusDonasiId: true,
-        Author: true,
+        // imagesId: true,
+        terkumpul: true,
+        // donasiMaster_KategoriId: true,
+        // donasiMaster_DurasiId: true,
+        // donasiMaster_StatusDonasiId: true,
+        // Author: true,
         imageDonasi: true,
-        CeritaDonasi: true,
+        // CeritaDonasi: true,
         DonasiMaster_Ketegori: true,
         DonasiMaster_Durasi: true,
-        DonasiMaster_Status: true,
+        // DonasiMaster_Status: true,
       },
     });
-    return getReview;
+    return getPublish;
   }
 
   if (status === "2") {
diff --git a/src/app_modules/admin/donasi/fun/get/get_list_pencairan_dana_by_id.ts b/src/app_modules/admin/donasi/fun/get/get_list_pencairan_dana_by_id.ts
new file mode 100644
index 00000000..9007e75a
--- /dev/null
+++ b/src/app_modules/admin/donasi/fun/get/get_list_pencairan_dana_by_id.ts
@@ -0,0 +1,13 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function AdminDonasi_getListPencairanDana(donasiId:string) {
+    const data = await prisma.donasi_PencairanDana.findMany({
+        where: {
+            donasiId: donasiId
+        }
+    })
+
+    return data
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/donasi/fun/get/get_list_status_invoice_proses.ts b/src/app_modules/admin/donasi/fun/get/get_list_status_invoice_proses.ts
index 8895b647..79dca473 100644
--- a/src/app_modules/admin/donasi/fun/get/get_list_status_invoice_proses.ts
+++ b/src/app_modules/admin/donasi/fun/get/get_list_status_invoice_proses.ts
@@ -15,6 +15,7 @@ export async function AdminDonasi_getListStatusInvoiceProses(donasiId: string) {
       nominal: true,
       createdAt: true,
       Author: true,
+      imagesId: true,
       Donasi: {
         select: {
             id: true,
@@ -26,8 +27,6 @@ export async function AdminDonasi_getListStatusInvoiceProses(donasiId: string) {
             publishTime: true,
             catatan: true,
             terkumpul: true,
-            authorId: true,
-            imagesId: true,
             donasiMaster_KategoriId: true,
             donasiMaster_DurasiId: true,
             donasiMaster_StatusDonasiId: true,
diff --git a/src/app_modules/admin/donasi/fun/get/get_one_by_id.ts b/src/app_modules/admin/donasi/fun/get/get_one_by_id.ts
index 355ed71e..4f964f95 100644
--- a/src/app_modules/admin/donasi/fun/get/get_one_by_id.ts
+++ b/src/app_modules/admin/donasi/fun/get/get_one_by_id.ts
@@ -2,7 +2,7 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function AdminDonasi_getById(id: string) {
+export async function AdminDonasi_getOneById(id: string) {
   const res = await prisma.donasi.findFirst({
     where: {
       id: id,
@@ -19,6 +19,10 @@ export async function AdminDonasi_getById(id: string) {
       progres: true,
       terkumpul: true,
       authorId: true,
+      namaBank: true,
+      rekening: true,
+      totalPencairan: true,
+      akumulasiPencairan: true,
       imagesId: true,
       donasiMaster_KategoriId: true,
       donasiMaster_DurasiId: true,
@@ -31,5 +35,6 @@ export async function AdminDonasi_getById(id: string) {
       DonasiMaster_Status: true,
     },
   });
+  // console.log(res)
   return res;
 }
diff --git a/src/app_modules/admin/donasi/fun/update/fun_update_akumulasi_pencairan.ts b/src/app_modules/admin/donasi/fun/update/fun_update_akumulasi_pencairan.ts
new file mode 100644
index 00000000..0d208c36
--- /dev/null
+++ b/src/app_modules/admin/donasi/fun/update/fun_update_akumulasi_pencairan.ts
@@ -0,0 +1,47 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+
+export async function AdminDonasi_AkumulasiPencairanById(
+  donasiId: string,
+  nominalPencairan: number
+) {
+  const cariDonasi = await prisma.donasi.findFirst({
+    where: {
+      id: donasiId,
+    },
+    select: {
+      akumulasiPencairan: true,
+      totalPencairan: true,
+    },
+  });
+
+  if (!cariDonasi) return { status: 400, message: "Donasi tidak ditemukan" };
+
+  let akumulasiSementara: number | any = cariDonasi.akumulasiPencairan;
+  let totalSementara: number | any = cariDonasi.totalPencairan;
+
+//   console.log(akumulasiSementara, "akumulasi");
+//   console.log(totalSementara, "total");
+
+  const hasilTotal = totalSementara + Number(nominalPencairan)
+  const hasilAkumulasi = akumulasiSementara + 1;
+
+  const update = await prisma.donasi.update({
+    where: {
+      id: donasiId,
+    },
+    data: {
+      akumulasiPencairan: hasilAkumulasi,
+      totalPencairan: hasilTotal,
+    },
+  });
+
+  if (!update) return { status: 400, message: "Update akumulasi gagal" };
+
+  return {
+    status: 200,
+    message: "Berhasil di simpan",
+  };
+}
diff --git a/src/app_modules/admin/donasi/fun/update/fun_update_catatan_reject.ts b/src/app_modules/admin/donasi/fun/update/fun_update_catatan_reject.ts
new file mode 100644
index 00000000..2d0d5898
--- /dev/null
+++ b/src/app_modules/admin/donasi/fun/update/fun_update_catatan_reject.ts
@@ -0,0 +1,20 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function AdminDonasi_funUpdateCatatanReject(doansiId: string, catatan: string) {
+    const updt = await prisma.donasi.update({
+        where: {
+            id: doansiId
+        },
+        data: {
+            catatan: catatan
+        }
+    })
+
+    if(!updt) return {status: 400, message: "Gagal update"}
+    return {
+        status: 200,
+        message: "Berhasil update"
+    }
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/donasi/global_state/index.ts b/src/app_modules/admin/donasi/global_state/index.ts
new file mode 100644
index 00000000..82788e0b
--- /dev/null
+++ b/src/app_modules/admin/donasi/global_state/index.ts
@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_adminDonasi_hotMenu = atomWithStorage("gs_adminDonasi_hotMenu", 0)
\ No newline at end of file
diff --git a/src/app_modules/admin/donasi/index.tsx b/src/app_modules/admin/donasi/index.tsx
index 68656f82..23917fc1 100644
--- a/src/app_modules/admin/donasi/index.tsx
+++ b/src/app_modules/admin/donasi/index.tsx
@@ -6,6 +6,7 @@ import AdminDonasi_DetailReview from "./detail_table/detail_review";
 import AdminDonasi_TableReject from "./table_status/table_reject";
 import AdminDonasi_DetailReject from "./detail_table/detail_reject";
 import AdminDonasi_ProsesTransaksi from "./detail_table/publish/proses_transaksi";
+import AdminDonasi_PencairanDana from "./detail_table/publish/pencairan_dana";
 
 export {
   AdminDonasi_Main,
@@ -15,4 +16,6 @@ export {
   AdminDonasi_TableReject,
   AdminDonasi_DetailReview,
   AdminDonasi_DetailReject,
+  AdminDonasi_ProsesTransaksi,
+  AdminDonasi_PencairanDana,
 };
diff --git a/src/app_modules/admin/donasi/table_status/table_publish.tsx b/src/app_modules/admin/donasi/table_status/table_publish.tsx
index 9305ccb9..4a935c72 100644
--- a/src/app_modules/admin/donasi/table_status/table_publish.tsx
+++ b/src/app_modules/admin/donasi/table_status/table_publish.tsx
@@ -14,7 +14,7 @@ import {
 } from "@mantine/core";
 import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
@@ -27,7 +27,7 @@ export default function AdminDonasi_TablePublish({
   return (
     <>
       <Stack>
-        <AdminDonasi_TombolKembali />
+        <ComponentAdminDonasi_TombolKembali />
         <TableStatus listPublish={listPublish as any} />
       </Stack>
     </>
@@ -45,6 +45,9 @@ function TableStatus({ listPublish }: { listPublish: MODEL_DONASI[] }) {
       <td>
         <TampilanRupiahDonasi nominal={+e.target} />
       </td>
+      <td>
+        <TampilanRupiahDonasi nominal={+e.terkumpul}/>
+      </td>
       <td>{e.DonasiMaster_Ketegori.name}</td>
       <td>{e.DonasiMaster_Durasi.name} hari</td>
       <td>
@@ -84,6 +87,7 @@ function TableStatus({ listPublish }: { listPublish: MODEL_DONASI[] }) {
             <tr>
               <th>Judul</th>
               <th>Target</th>
+              <th>Terkumpul</th>
               <th>Ketegori</th>
               <th>Durasi</th>
               <th><Center>Aksi</Center></th>
diff --git a/src/app_modules/admin/donasi/table_status/table_reject.tsx b/src/app_modules/admin/donasi/table_status/table_reject.tsx
index cf4a0707..2ec2fb01 100644
--- a/src/app_modules/admin/donasi/table_status/table_reject.tsx
+++ b/src/app_modules/admin/donasi/table_status/table_reject.tsx
@@ -15,7 +15,7 @@ import {
 } from "@mantine/core";
 import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { useDisclosure } from "@mantine/hooks";
 import AdminDonasi_DetailReview from "../detail_table/detail_review";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
@@ -30,7 +30,7 @@ export default function AdminDonasi_TableReject({
   return (
     <>
       <Stack>
-        <AdminDonasi_TombolKembali />
+        <ComponentAdminDonasi_TombolKembali />
         <TableStatus dataReject={dataReject} />
       </Stack>
     </>
diff --git a/src/app_modules/admin/donasi/table_status/table_review.tsx b/src/app_modules/admin/donasi/table_status/table_review.tsx
index c55a8cb7..88a28e93 100644
--- a/src/app_modules/admin/donasi/table_status/table_review.tsx
+++ b/src/app_modules/admin/donasi/table_status/table_review.tsx
@@ -15,7 +15,7 @@ import {
 } from "@mantine/core";
 import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import AdminDonasi_TombolKembali from "../component/tombol_kembali";
+import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { useDisclosure } from "@mantine/hooks";
 import AdminDonasi_DetailReview from "../detail_table/detail_review";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
@@ -30,7 +30,7 @@ export default function AdminDonasi_TableReview({
   return (
     <>
       <Stack>
-        <AdminDonasi_TombolKembali />
+        <ComponentAdminDonasi_TombolKembali />
         <TableStatus listReview={listReview} />
       </Stack>
     </>
diff --git a/src/app_modules/admin/main/layout.tsx b/src/app_modules/admin/main/layout.tsx
index 45b59e8f..528e1057 100644
--- a/src/app_modules/admin/main/layout.tsx
+++ b/src/app_modules/admin/main/layout.tsx
@@ -6,6 +6,7 @@ import {
   Avatar,
   Box,
   Burger,
+  Divider,
   Drawer,
   Footer,
   Group,
@@ -31,6 +32,8 @@ import {
 import { useRouter } from "next/navigation";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { Logout } from "@/app_modules/auth";
+import { useAtom } from "jotai";
+import { gs_adminDonasi_hotMenu } from "../donasi/global_state";
 
 export default function AdminLayout({
   children,
@@ -40,7 +43,7 @@ export default function AdminLayout({
   const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   const router = useRouter();
-  const [active, setActive] = useState(1);
+  const [active, setActive] = useAtom(gs_adminDonasi_hotMenu);
 
   const listAdminPage = [
     {
@@ -75,15 +78,24 @@ export default function AdminLayout({
               p="xs"
               bg={"gray.2"}
             >
-              {listAdminPage.map((e) => (
-                <NavLink
-                  key={e.id}
-                  label={e.name}
-                  onClick={() => {
-                    // setActive(e.id);
-                    router.push(e.route);
-                  }}
-                />
+              {listAdminPage.map((e, i) => (
+                <Box key={i}>
+                  <NavLink
+                    sx={{
+                      ":hover": {
+                        backgroundColor: "transparent",
+                      },
+                    }}
+                    fw={active === i ? "bold" : "normal"}
+                    // key={e.id}
+                    label={e.name}
+                    onClick={() => {
+                      setActive(i);
+                      router.push(e.route);
+                    }}
+                  />
+                  {active === i ? <Divider size={"lg"} color="gray" /> : ""}
+                </Box>
               ))}
             </Navbar>
           </MediaQuery>
diff --git a/src/app_modules/auth/login/view.tsx b/src/app_modules/auth/login/view.tsx
index ef726c79..77be0cff 100644
--- a/src/app_modules/auth/login/view.tsx
+++ b/src/app_modules/auth/login/view.tsx
@@ -13,6 +13,8 @@ import { useAtom } from "jotai";
 import { gs_otp, gs_nomor } from "../state/state";
 import { IconCircleLetterH } from "@tabler/icons-react";
 import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
+import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
+import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
 
 export default function Login() {
   const router = useRouter();
@@ -44,12 +46,12 @@ export default function Login() {
           router.push(RouterAdminDashboard.splash_admin);
         } else {
           if (val.status == 200) {
-            toast("Nomor OTP terkirim");
             setCode(val.body.otp);
             setInputNumber(val.body.nomor);
             router.push("/dev/auth/validasi");
+           return NotifBerhasil("Nomor OTP terkirim");
           } else {
-            toast(val.message);
+            NotifGagal(val.message);
           }
         }
       });
diff --git a/src/app_modules/auth/validasi/view.tsx b/src/app_modules/auth/validasi/view.tsx
index e1650fbe..7aea8491 100644
--- a/src/app_modules/auth/validasi/view.tsx
+++ b/src/app_modules/auth/validasi/view.tsx
@@ -21,6 +21,9 @@ import { ApiHipmi } from "@/app/lib/api";
 import { useRouter } from "next/navigation";
 import { funGetUserProfile } from "@/app_modules/fun/get_user_profile";
 import { useFocusTrap } from "@mantine/hooks";
+import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
+import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
+import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
 
 export default function Validasi() {
   const router = useRouter();
@@ -51,12 +54,12 @@ export default function Validasi() {
       .then((val) => {
         myConsole(val);
         if (val.status == 200) {
-          toast("Berhasil Login");
           setTimeout(() => router.push("/dev/home"), 2000);
           funGetUserProfile(val.data.id);
+          NotifBerhasil("Berhasil Login");
         } else {
-          toast("Silahkan Registrasi");
-          return router.push("/dev/auth/register");
+          router.push("/dev/auth/register");
+          NotifPeringatan("Silahkan Registrasi");
         }
       });
   };
diff --git a/src/app_modules/donasi/component/box_publish.tsx b/src/app_modules/donasi/component/box_publish.tsx
index 5dc58494..f6972dcd 100644
--- a/src/app_modules/donasi/component/box_publish.tsx
+++ b/src/app_modules/donasi/component/box_publish.tsx
@@ -45,10 +45,9 @@ export default function ComponentDonasi_BoxPublish({
         {donasi.map((e, i) => (
           <Box
             key={i}
-            onClick={
-              () => router.push(path + `${e.id}`)
-              // toast("Cooming soon")
-            }
+            onClick={() => {
+              router.push(path + `${e.id}`);
+            }}
           >
             <Stack>
               <Grid>
diff --git a/src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx b/src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx
index ad38438c..292c4f80 100644
--- a/src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx
+++ b/src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx
@@ -22,13 +22,19 @@ import {
 } from "@tabler/icons-react";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { NotifPeringatan } from "../notifikasi/notif_peringatan";
+import { NotifBerhasil } from "../notifikasi/notif_berhasil";
+import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
 
 export function ComponentDonasi_DetailDataMain({
   donasi,
   countDonatur,
+  userLoginId,
 }: {
   donasi: MODEL_DONASI;
   countDonatur: number;
+  userLoginId?: string | any;
 }) {
   const router = useRouter();
   return (
@@ -103,7 +109,7 @@ export function ComponentDonasi_DetailDataMain({
             <Divider orientation="vertical" />
             <Grid.Col
               span={"auto"}
-              onClick={() => router.push(RouterDonasi.pencairan_dana)}
+              onClick={() => onPencairanDana(router, donasi, userLoginId)}
             >
               <Stack spacing={"sm"} align="center">
                 <IconMoneybag color="skyblue" />
@@ -116,3 +122,23 @@ export function ComponentDonasi_DetailDataMain({
     </>
   );
 }
+
+async function onPencairanDana(
+  router: AppRouterInstance,
+  donasi: MODEL_DONASI,
+  userLoginId: string
+) {
+  // console.log(userLoginId)
+  // console.log(donasi.authorId)
+  const cek = await Donasi_findDonaturByTokenId(donasi.id, userLoginId);
+
+  if(userLoginId == donasi.authorId)
+   return router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
+
+  if (!cek ) return NotifPeringatan("Halaman khusus donatur");
+  router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
+
+  // if (userLoginId != donasi.authorId)
+  //   return NotifPeringatan("Halaman khusus donatur");
+  // router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
+}
diff --git a/src/app_modules/donasi/component/detail_main/list_kabar.tsx b/src/app_modules/donasi/component/detail_main/list_kabar.tsx
index a211d968..9cab998a 100644
--- a/src/app_modules/donasi/component/detail_main/list_kabar.tsx
+++ b/src/app_modules/donasi/component/detail_main/list_kabar.tsx
@@ -3,16 +3,18 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { Paper, Stack, Text, Title } from "@mantine/core";
 import moment from "moment";
-import router from "next/router";
+
 import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { useRouter } from "next/navigation";
 
 export default function ComponentDonasi_ListKabar({
   kabar,
-
+  route
 }: {
   kabar: MODEL_DONASI_KABAR;
-
+  route: string
 }) {
+  const router = useRouter();
   return (
     <>
       <Paper bg={"gray.1"} p={"md"}>
@@ -26,7 +28,7 @@ export default function ComponentDonasi_ListKabar({
               <Text
                 c={"blue"}
                 onClick={() =>
-                  router.push(RouterDonasi.update_kabar + `${kabar.id}`)
+                  router.push(route + `${kabar.id}`)
                 }
               >
                 Buka Kabar
diff --git a/src/app_modules/donasi/component/header_tamplate.tsx b/src/app_modules/donasi/component/header_tamplate.tsx
index f5e1edc8..57ca739c 100644
--- a/src/app_modules/donasi/component/header_tamplate.tsx
+++ b/src/app_modules/donasi/component/header_tamplate.tsx
@@ -5,7 +5,7 @@ import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function HeaderTamplateDonasi({
+export default function ComponentDonasi_HeaderTamplate({
   hideBack,
   changeIconBack,
   route,
diff --git a/src/app_modules/donasi/component/noted_box.tsx b/src/app_modules/donasi/component/noted_box.tsx
index 58948302..379587d5 100644
--- a/src/app_modules/donasi/component/noted_box.tsx
+++ b/src/app_modules/donasi/component/noted_box.tsx
@@ -7,9 +7,9 @@ export default function ComponentDonasi_NotedBox({
 }) {
   return (
     <>
-      <Paper bg={"blue.3"} p={"sm"}>
+      <Paper bg={"blue.3"} p={10}>
         <Group>
-          <Text fz={"xs"} fs={"italic"}>
+          <Text fz={10} fs={"italic"}>
             <Text span inherit c={"red"}>
               *{" "}
             </Text>
diff --git a/src/app_modules/donasi/create/create_cerita_penggalang.tsx b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
index 9a768ded..e3e894fd 100644
--- a/src/app_modules/donasi/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -9,6 +9,8 @@ import {
   Image,
   Paper,
   Stack,
+  Text,
+  TextInput,
   Textarea,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
@@ -38,6 +40,9 @@ export default function CreateCeritaPenggalangDonasi({
   const [create, setCreate] = useState({
     pembukaan: "",
     cerita: "",
+    namaBank: "",
+    rekening: ""
+    
   });
   const [temporary, setTemporary] = useState(dataTemporary);
   const [file, setFile] = useState<File | null>(null);
@@ -58,6 +63,8 @@ export default function CreateCeritaPenggalangDonasi({
       donasiMaster_KategoriId: temporary.donasiMaster_KategoriId,
       donasiMaster_DurasiId: temporary.donasiMaster_DurasiId,
       authorId: userId,
+      namaBank: create.namaBank,
+      rekening: create.rekening,
       CeritaDonasi: {
         pembukaan: create.pembukaan,
         cerita: create.cerita,
@@ -75,79 +82,118 @@ export default function CreateCeritaPenggalangDonasi({
   }
   return (
     <>
-      <Stack spacing={"md"} px={"md"}>
+      <Stack spacing={50} px={"md"}>
         {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
-        <ComponentDonasi_NotedBox informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
-        <Textarea
-          autosize
-          minRows={2}
-          maxRows={4}
-          withAsterisk
-          label="Pembukaan"
-          placeholder="Pembuka dari isi cerita"
-          onChange={(val) =>
-            setCreate({
-              ...create,
-              pembukaan: val.target.value,
-            })
-          }
-        />
-        <Stack spacing={"xs"}>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image
-                alt="Foto"
-                src={imageCerita ? imageCerita : "/aset/no-img.png"}
-              />
-            </Paper>
-          </AspectRatio>
+        <Stack spacing={"sm"}>
+          <ComponentDonasi_NotedBox informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
 
-          <Center>
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-                  // console.log(buffer, "ini buffer");
-                  // console.log(files, " ini file");
-                  setImageCerita(buffer);
-                  setFile(files);
-                } catch (error) {
-                  console.log(error);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  radius={"xl"}
-                  variant="outline"
-                  w={150}
-                  leftIcon={<IconCamera />}
-                >
-                  Upload
-                </Button>
-              )}
-            </FileButton>
-          </Center>
+          <Textarea
+            autosize
+            minRows={2}
+            maxRows={4}
+            withAsterisk
+            label="Pembukaan"
+            placeholder="Pembuka dari isi cerita"
+            onChange={(val) =>
+              setCreate({
+                ...create,
+                pembukaan: val.target.value,
+              })
+            }
+          />
+
+          <Textarea
+            autosize
+            minRows={2}
+            maxRows={10}
+            withAsterisk
+            label="Cerita"
+            placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+            onChange={(val) =>
+              setCreate({
+                ...create,
+                cerita: val.target.value,
+              })
+            }
+          />
+
+          <Stack spacing={"xs"}>
+            <Center>
+              <FileButton
+                onChange={async (files: any | null) => {
+                  try {
+                    const buffer = URL.createObjectURL(
+                      new Blob([new Uint8Array(await files.arrayBuffer())])
+                    );
+                    // console.log(buffer, "ini buffer");
+                    // console.log(files, " ini file");
+                    setImageCerita(buffer);
+                    setFile(files);
+                  } catch (error) {
+                    console.log(error);
+                  }
+                }}
+                accept="image/png,image/jpeg"
+              >
+                {(props) => (
+                  <Button
+                    compact
+                    {...props}
+                    radius={"xl"}
+                    variant="outline"
+                    w={150}
+                    leftIcon={<IconCamera />}
+                  >
+                    Upload
+                  </Button>
+                )}
+              </FileButton>
+            </Center>
+
+            {imageCerita ? (
+              <AspectRatio ratio={16 / 9}>
+                <Paper radius={"md"}>
+                  <Image
+                    alt="Foto"
+                    src={imageCerita ? imageCerita : "/aset/no-img.png"}
+                  />
+                </Paper>
+              </AspectRatio>
+            ) : (
+              <Center>
+              <Text fs={"italic"} fz={10}>
+                Upload poster atau gambar penggalangan !
+              </Text>
+            </Center>
+            )}
+          </Stack>
         </Stack>
-        <Textarea
-          autosize
-          minRows={2}
-          maxRows={10}
-          withAsterisk
-          label="Cerita"
-          placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
-          onChange={(val) =>
-            setCreate({
-              ...create,
-              cerita: val.target.value,
-            })
-          }
-        />
 
+        <Stack spacing={"sm"}>
+          <ComponentDonasi_NotedBox informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
+          <TextInput
+            withAsterisk
+            placeholder="Contoh: BNI, BCA, MANDIRI, DLL"
+            label="Nama Bank"
+            onChange={(val) => {
+              setCreate({
+                ...create,
+                namaBank: _.upperCase(val.target.value)
+              })
+            }}
+          />
+          <TextInput
+            withAsterisk
+            placeholder="Maskuan nomor rekening"
+            label="Nomor rekening"
+            onChange={(val) => {
+              setCreate({
+                ...create,
+                rekening: val.target.value
+              })
+            }}
+          />
+        </Stack>
         <Button w={"100%"} radius={"xl"} onClick={() => onCreate()}>
           Simpan
         </Button>
diff --git a/src/app_modules/donasi/create/create_donasi.tsx b/src/app_modules/donasi/create/create_donasi.tsx
index 4b14a839..1f2c739b 100644
--- a/src/app_modules/donasi/create/create_donasi.tsx
+++ b/src/app_modules/donasi/create/create_donasi.tsx
@@ -91,46 +91,7 @@ export default function CreateDonasi({
             })
           }
         />
-        <Stack>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image
-                alt="Foto"
-                src={imageDonasi ? imageDonasi : "/aset/no-img.png"}
-              />
-            </Paper>
-          </AspectRatio>
-          <Center>
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-                  // console.log(buffer, "ini buffer");
-                  // console.log(files, " ini file");
-                  setImageDonasi(buffer);
-                  setFile(files);
-                } catch (error) {
-                  console.log(error);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  radius={"xl"}
-                  variant="outline"
-                  w={150}
-                  leftIcon={<IconCamera />}
-                >
-                  Upload
-                </Button>
-              )}
-            </FileButton>
-          </Center>
-        </Stack>
+
         <Stack>
           <TextInput
             withAsterisk
@@ -160,6 +121,56 @@ export default function CreateDonasi({
             onChange={(val: string) => setCreate({ ...create, durasiId: val })}
           />
         </Stack>
+
+        <Stack>
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  // console.log(buffer, "ini buffer");
+                  // console.log(files, " ini file");
+                  setImageDonasi(buffer);
+                  setFile(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                compact
+                  {...props}
+                  radius={"xl"}
+                  variant="outline"
+                  w={150}
+                  leftIcon={<IconCamera />}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+          {imageDonasi ? (
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt="Foto"
+                  src={imageDonasi ? imageDonasi : "/aset/no-img.png"}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <Center>
+              <Text fs={"italic"} fz={10}>
+                Upload poster atau gambar penggalangan !
+              </Text>
+            </Center>
+          )}
+        </Stack>
         <Button my={"lg"} radius={"xl"} onClick={() => onCreate()}>
           Selanjutnya
         </Button>
diff --git a/src/app_modules/donasi/create/create_kabar/index.tsx b/src/app_modules/donasi/create/create_kabar/index.tsx
index 892819d3..f7594004 100644
--- a/src/app_modules/donasi/create/create_kabar/index.tsx
+++ b/src/app_modules/donasi/create/create_kabar/index.tsx
@@ -21,6 +21,8 @@ import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import _ from "lodash";
 import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import ComponentDonasi_NotedBox from "../../component/noted_box";
+import { Donasi_funCreateNotif } from "../../fun/create/fun_create_notif";
 
 export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   const router = useRouter();
@@ -33,6 +35,8 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   return (
     <>
       <Stack>
+        <ComponentDonasi_NotedBox informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
+
         <TextInput
           label="Judul"
           withAsterisk
@@ -88,6 +92,7 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
                   variant="outline"
                   w={150}
                   leftIcon={<IconCamera />}
+                  compact
                 >
                   Upload
                 </Button>
@@ -125,15 +130,19 @@ async function onSave(
   };
 
   if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
-  if (!file) return NotifPeringatan("Lengkapi Gambar");
+  // if (!file) return NotifPeringatan("Lengkapi Gambar");
 
   const gambar = new FormData();
   gambar.append("file", file as any);
 
-  await Donasi_funCreateKabar(body as any, gambar).then((res) => {
+  await Donasi_funCreateKabar(body as any, gambar).then(async (res) => {
     if (res.status === 200) {
-      NotifBerhasil(res.message);
-      router.back()
+      await Donasi_funCreateNotif(body.donasiId, res.kabarId as any).then((val) => {
+        if (val.status === 200) {
+          NotifBerhasil(res.message);
+          router.back();
+        }
+      });
     } else {
       NotifGagal(res.message);
     }
diff --git a/src/app_modules/donasi/create/create_kabar/layout.tsx b/src/app_modules/donasi/create/create_kabar/layout.tsx
index fab7cd89..347e0e17 100644
--- a/src/app_modules/donasi/create/create_kabar/layout.tsx
+++ b/src/app_modules/donasi/create/create_kabar/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutDonasi_CreateKabar({
   children,
@@ -11,7 +11,7 @@ export default function LayoutDonasi_CreateKabar({
 }) {
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Buat Kabar" />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Buat Kabar" />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/create/layout.tsx b/src/app_modules/donasi/create/layout.tsx
index 56a3566d..264e5d66 100644
--- a/src/app_modules/donasi/create/layout.tsx
+++ b/src/app_modules/donasi/create/layout.tsx
@@ -2,11 +2,11 @@
 
 import { AppShell } from "@mantine/core"
 import React from "react"
-import HeaderTamplateDonasi from "../component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "../component/header_tamplate"
 
 export default function LayoutCreateDonasi({children}: {children: React.ReactNode}){
     return<>
-    <AppShell header={<HeaderTamplateDonasi title="Buat Donasi"/>}>
+    <AppShell header={<ComponentDonasi_HeaderTamplate title="Buat Donasi"/>}>
         {children}
     </AppShell>
     
diff --git a/src/app_modules/donasi/detail/deail_notif/index.tsx b/src/app_modules/donasi/detail/deail_notif/index.tsx
new file mode 100644
index 00000000..c0547218
--- /dev/null
+++ b/src/app_modules/donasi/detail/deail_notif/index.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AspectRatio, Box, Image, Paper, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import kabar from "../detail_main/kabar";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { useState } from "react";
+
+export default function Donasi_DetailNotif({dataKabar}: {dataKabar: MODEL_DONASI_KABAR}) {
+  const [kabar, setKabar] = useState(dataKabar)
+  return <>
+   <Stack>
+        <Stack>
+          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          <Title order={5}>{kabar.title}</Title>
+          {kabar.imagesId === null ? (
+            ""
+          ) : (
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt="Foro"
+                  src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
+                />
+              </Paper>
+            </AspectRatio>
+          )}
+          <Text>{kabar.deskripsi}</Text>
+        </Stack>
+      </Stack>
+
+  </>;
+}
diff --git a/src/app_modules/donasi/detail/deail_notif/layout.tsx b/src/app_modules/donasi/detail/deail_notif/layout.tsx
new file mode 100644
index 00000000..f70f5d1c
--- /dev/null
+++ b/src/app_modules/donasi/detail/deail_notif/layout.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { AppShell, Button, Center, Footer } from "@mantine/core";
+import React from "react";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
+import { useRouter } from "next/navigation";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+
+export default function LayoutDonasi_DetailNotif({
+  children,
+  donasiId,
+}: {
+  children: React.ReactNode;
+  donasiId: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={<ComponentDonasi_HeaderTamplate title="Detail Pemberitahuan" />}
+        footer={
+          <Footer height={70} p={"md"}>
+            <Center h={"100%"}>
+              <Button
+                w={"100%"}
+                radius={"xl"}
+                onClick={() =>
+                  router.push(RouterDonasi.detail_main + `${donasiId}`)
+                }
+              >
+                Lihat Donasi
+              </Button>
+            </Center>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx b/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
index 50a96437..364f88d6 100644
--- a/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
@@ -2,13 +2,13 @@
 
 import { AppShell } from "@mantine/core"
 import React from "react"
-import HeaderTamplateDonasi from "../../component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"
 
 export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
     return<>
     <AppShell
-    header={<HeaderTamplateDonasi title="Detail Donasi Saya" route={RouterDonasi.main_donasi_saya} />}
+    header={<ComponentDonasi_HeaderTamplate title="Detail Donasi Saya" route={RouterDonasi.main_donasi_saya} />}
     >
         {children}
     </AppShell>
diff --git a/src/app_modules/donasi/detail/detail_draft/layout.tsx b/src/app_modules/donasi/detail/detail_draft/layout.tsx
index 927a1945..b5e63dc1 100644
--- a/src/app_modules/donasi/detail/detail_draft/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_draft/layout.tsx
@@ -12,7 +12,7 @@ import {
   Title,
 } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import {
   IconChevronLeft,
   IconEdit,
@@ -78,6 +78,15 @@ export default function LayoutDetailDraftDonasi({
           >
             Edit Cerita
           </Button>
+          <Button
+            variant="outline"
+            radius={"xl"}
+            w={"100%"}
+            color="orange"
+            onClick={() => router.push(RouterDonasi.edit_rekening + `${donasiId}`)}
+          >
+            Edit Rekening
+          </Button>
         </Stack>
       </Modal>
     </>
diff --git a/src/app_modules/donasi/detail/detail_kabar/index.tsx b/src/app_modules/donasi/detail/detail_kabar/index.tsx
index bf747081..1bd0fff2 100644
--- a/src/app_modules/donasi/detail/detail_kabar/index.tsx
+++ b/src/app_modules/donasi/detail/detail_kabar/index.tsx
@@ -13,38 +13,30 @@ import {
   Divider,
 } from "@mantine/core";
 import moment from "moment";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { useState } from "react";
 
-export default function DetailKabarDonasi() {
+export default function DetailKabarDonasi({dataDonasi}: {dataDonasi: MODEL_DONASI_KABAR}) {
+  const [kabar, setKabar] = useState(dataDonasi)
   return (
     <>
-      <Stack>
-        <Group>
-          <Avatar variant="filled" radius={"xl"} />
-          <Stack spacing={0}>
-            <Text>Username</Text>
-            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-          </Stack>
-        </Group>
+     <Stack>
         <Stack>
-          <Title order={5}>Judul Berita</Title>
-         
-
-          <Text>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
-            nostrum vitae eum facilis similique minus exercitationem assumenda,
-            quidem dolores illum ducimus fuga rem molestias? Numquam id
-            praesentium dolor qui amet.
-          </Text>
-
-          <AspectRatio ratio={16 / 9}>
-            <Image alt="Foro" src={"/aset/no-img.png"} />
-          </AspectRatio>
-          <Text>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
-            nostrum vitae eum facilis similique minus exercitationem assumenda,
-            quidem dolores illum ducimus fuga rem molestias? Numquam id
-            praesentium dolor qui amet.
-          </Text>
+          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          <Title order={5}>{kabar.title}</Title>
+          {kabar.imagesId === null ? (
+            ""
+          ) : (
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt="Foro"
+                  src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
+                />
+              </Paper>
+            </AspectRatio>
+          )}
+          <Text>{kabar.deskripsi}</Text>
         </Stack>
       </Stack>
     </>
diff --git a/src/app_modules/donasi/detail/detail_kabar/layout.tsx b/src/app_modules/donasi/detail/detail_kabar/layout.tsx
index c55fdb25..0a5422a3 100644
--- a/src/app_modules/donasi/detail/detail_kabar/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_kabar/layout.tsx
@@ -11,7 +11,7 @@ import {
 import { useRouter } from "next/navigation";
 import React from "react";
 import FooterDonasi from "../../component/footer_close_donasi";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutDetailKabarDonasi({
   children,
@@ -22,7 +22,7 @@ export default function LayoutDetailKabarDonasi({
   return (
     <>
       <AppShell
-        header={<HeaderTamplateDonasi title="Detail Kabar" hideBack={true} />}
+        header={<ComponentDonasi_HeaderTamplate title="Detail Kabar" hideBack={true} />}
         footer={<FooterDonasi />}
       >
         {children}
diff --git a/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx b/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
index bbea227f..c9ad1144 100644
--- a/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
@@ -2,7 +2,7 @@
 
 import ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi";
 import FooterDonasi from "@/app_modules/donasi/component/footer_close_donasi";
-import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -19,7 +19,7 @@ export default function LayoutCeritaPenggalangDonasi({
     return (
       <>
         <AppShell
-          header={<HeaderTamplateDonasi title="Cerita Penggalang Dana" />}
+          header={<ComponentDonasi_HeaderTamplate title="Cerita Penggalang Dana" />}
         >
           {children}
         </AppShell>
@@ -28,7 +28,7 @@ export default function LayoutCeritaPenggalangDonasi({
   }
   return (
     <AppShell
-      header={<HeaderTamplateDonasi title="Cerita Penggalang Dana" />}
+      header={<ComponentDonasi_HeaderTamplate title="Cerita Penggalang Dana" />}
       footer={<ButtonDonasi donasiId={donasiId}/>}
     >
       {children}
diff --git a/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx b/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
index d274bbb6..787fff55 100644
--- a/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate";
 
 export default function LayoutDonaturDonasi({
   children,
@@ -11,7 +11,7 @@ export default function LayoutDonaturDonasi({
 }) {
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Donatur" />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Donatur" />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/detail/detail_main/index.tsx b/src/app_modules/donasi/detail/detail_main/index.tsx
index ba6aa300..5aaf30b5 100644
--- a/src/app_modules/donasi/detail/detail_main/index.tsx
+++ b/src/app_modules/donasi/detail/detail_main/index.tsx
@@ -35,15 +35,21 @@ import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main
 
 export default function DetailMainDonasi({
   dataDonasi,
-  countDonatur
+  countDonatur,
+  userLoginId,
 }: {
   dataDonasi: MODEL_DONASI;
-  countDonatur: number
+  countDonatur: number;
+  userLoginId: string;
 }) {
   return (
     <>
       <Stack spacing={40}>
-        <ComponentDonasi_DetailDataMain donasi={dataDonasi} countDonatur={countDonatur} />
+        <ComponentDonasi_DetailDataMain
+          donasi={dataDonasi}
+          countDonatur={countDonatur}
+          userLoginId={userLoginId}
+        />
         <ComponentDonasi_InformasiPenggalangMain author={dataDonasi.Author} />
         <ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
       </Stack>
diff --git a/src/app_modules/donasi/detail/detail_main/kabar/index.tsx b/src/app_modules/donasi/detail/detail_main/kabar/index.tsx
index 0addf01f..b954ee16 100644
--- a/src/app_modules/donasi/detail/detail_main/kabar/index.tsx
+++ b/src/app_modules/donasi/detail/detail_main/kabar/index.tsx
@@ -40,7 +40,7 @@ export default function KabarDonasi({
       >
         {kabar.map((e, i) => (
          <Box key={i}>
-          <ComponentDonasi_ListKabar kabar={e} />
+          <ComponentDonasi_ListKabar kabar={e} route={RouterDonasi.detail_kabar} />
          </Box>
         ))}
       </SimpleGrid>
diff --git a/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx b/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
index c7ae2cca..9ff97c01 100644
--- a/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
@@ -2,12 +2,12 @@
 
 import { AppShell } from "@mantine/core"
 import React from "react"
-import HeaderTamplateDonasi from "../../../component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate"
 
 export default function LayoutKabarDonasi({children}: {children: React.ReactNode}){
     return<>
     <AppShell
-    header={<HeaderTamplateDonasi title="Kabar Terbaru"/>}
+    header={<ComponentDonasi_HeaderTamplate title="Kabar Terbaru"/>}
     >
         {children}
     </AppShell>
diff --git a/src/app_modules/donasi/detail/detail_main/layout.tsx b/src/app_modules/donasi/detail/detail_main/layout.tsx
index fb786581..09f55709 100644
--- a/src/app_modules/donasi/detail/detail_main/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell, Box, Button, Center, Footer } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import ButtonDonasi from "../../component/footer_button_donasi";
 
 export default function LayoutDetailMainDonasi({
@@ -15,7 +15,7 @@ export default function LayoutDetailMainDonasi({
   return (
     <>
       <AppShell
-        header={<HeaderTamplateDonasi title="Detail Donasi" />}
+        header={<ComponentDonasi_HeaderTamplate title="Detail Donasi" />}
         footer={<ButtonDonasi  donasiId={donasiId}/>}
       >
         {children}
diff --git a/src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx b/src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx
index 48750c98..ed043b69 100644
--- a/src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx
+++ b/src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx
@@ -1,7 +1,14 @@
 "use client";
 
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
+  MODEL_DONASI,
+  MODEL_DONASI_PENCAIRAN_DANA,
+} from "@/app_modules/donasi/model/interface";
+import {
+  AspectRatio,
   Avatar,
   Button,
   Center,
@@ -18,85 +25,103 @@ import {
 import { useDisclosure } from "@mantine/hooks";
 import { IconTransferIn } from "@tabler/icons-react";
 import moment from "moment";
+import { useState } from "react";
 
-export default function PencairanDanaDonasi() {
+export default function PencairanDanaDonasi({
+  totalAkumulasi,
+  listPencairan,
+}: {
+  totalAkumulasi: MODEL_DONASI;
+  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
+}) {
+  const [akumulasi, setAkumulasi] = useState(totalAkumulasi);
+  const [listPD, setListPD] = useState(listPencairan);
   return (
     <>
       <Stack>
-        <BoxDanaDicarikan />
-        <InformasiPencairanDana />
+        <BoxDanaDicarikan akumulasi={akumulasi} />
+        <InformasiPencairanDana listPD={listPD} />
       </Stack>
     </>
   );
 }
 
-function BoxDanaDicarikan() {
+function BoxDanaDicarikan({ akumulasi }: { akumulasi: MODEL_DONASI }) {
   return (
     <>
       <Paper bg={"gray.1"} p={"md"}>
         <Stack>
-        <Grid>
-          <Grid.Col span={6}>
-            <Title order={5}>Rp. 10.000.000</Title>
-            <Text fz={"xs"}>Dana sudah dicairkan</Text>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Title order={5}>2 kali</Title>
-            <Text fz={"xs"}>Pencairan dana</Text>
-          </Grid.Col>
-        </Grid>
-        <ComponentDonasi_NotedBox informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
+          <Grid>
+            <Grid.Col span={6}>
+              <Title order={5}>
+                <TampilanRupiahDonasi nominal={akumulasi.totalPencairan} />
+              </Title>
+              <Text fz={"xs"}>Dana sudah dicairkan</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Title order={5}>{akumulasi.akumulasiPencairan} kali</Title>
+              <Text fz={"xs"}>Pencairan dana</Text>
+            </Grid.Col>
+          </Grid>
+          <ComponentDonasi_NotedBox
+            informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
             pihak manapun, jika berita pencairan dana dibawah tidak sesuai
             dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
-            dapat melaporkannya pada Admin HIPMI !"/>
+            dapat melaporkannya pada Admin HIPMI !"
+          />
         </Stack>
       </Paper>
     </>
   );
 }
 
-function InformasiPencairanDana() {
+function InformasiPencairanDana({
+  listPD,
+}: {
+  listPD: MODEL_DONASI_PENCAIRAN_DANA[];
+}) {
   const [opened, { open, close }] = useDisclosure(false);
+  const [idGambar, setIdGambar] = useState("");
   return (
     <>
-      <Modal opened={opened} onClose={close} fullScreen>
-        <Paper>
-          <Stack>
+      <Modal opened={opened} onClose={close} size={"xl"}>
+        <AspectRatio ratio={9 / 16}>
+          <Paper>
+            <Image
+              alt="Foto"
+              src={RouterDonasi.api_gambar_pencairan + `${idGambar}`}
+            />
+          </Paper>
+        </AspectRatio>
+      </Modal>
+      {listPD.map((e, i) => (
+        <Paper key={i} withBorder p={"md"}>
+          <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
+          <Stack spacing={"lg"}>
+            <Title order={5}>{e.title}</Title>
+            <Spoiler
+              maxHeight={50}
+              hideLabel="Sembunyikan"
+              showLabel="Baca Selengkapnya"
+            >
+              {e.deskripsi}
+            </Spoiler>
             <Center>
-              <Title order={5}>Bukti Pencairan Dana</Title>
+              <Button
+                radius={"xl"}
+                variant="outline"
+                leftIcon={<IconTransferIn />}
+                onClick={() => {
+                  open();
+                  setIdGambar(e.imagesId);
+                }}
+              >
+                Bukti Transfer
+              </Button>
             </Center>
-            <Image alt="Foto" src={"/aset/donasi/bukti.jpg"} />
           </Stack>
         </Paper>
-      </Modal>
-      {Array(2)
-        .fill(0)
-        .map((e, i) => (
-          <Paper key={i} withBorder p={"md"}>
-            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-            <Stack spacing={"lg"}>
-              <Title order={5}>Pencairan Dana Sebesar Rp. 5.000.000</Title>
-              <Spoiler
-                maxHeight={50}
-                hideLabel="Sembunyikan"
-                showLabel="Baca Selengkapnya"
-              >
-                Pencairan Dana kepada pihak Penggalang dana sebesar 5 juta yang
-                di transfer pada, {moment(Date.now()).format("lll")}.
-              </Spoiler>
-              <Center>
-                <Button
-                  radius={"xl"}
-                  variant="outline"
-                  leftIcon={<IconTransferIn />}
-                  onClick={() => open()}
-                >
-                  Bukti Transfer
-                </Button>
-              </Center>
-            </Stack>
-          </Paper>
-        ))}
+      ))}
     </>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx b/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx
index b9b89359..6a3bde26 100644
--- a/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -11,7 +11,7 @@ export default function LayoutPencairanDanaDonasi({
 }) {
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Pencairan Dana" />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Pencairan Dana" />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx b/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
index 2d65da5d..708deacf 100644
--- a/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -12,7 +12,7 @@ export default function LayoutPenggalangDanaDonasi({
   return (
     <>
       <AppShell
-        header={<HeaderTamplateDonasi title="Informasi Penggalangan Dana" />}
+        header={<ComponentDonasi_HeaderTamplate title="Informasi Penggalangan Dana" />}
         //   footer={<FooterDonasi />}
       >
         {children}
diff --git a/src/app_modules/donasi/detail/detail_publish/index.tsx b/src/app_modules/donasi/detail/detail_publish/index.tsx
index 40df96e3..f978c5e1 100644
--- a/src/app_modules/donasi/detail/detail_publish/index.tsx
+++ b/src/app_modules/donasi/detail/detail_publish/index.tsx
@@ -31,17 +31,19 @@ import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main
 
 export default function DetailPublishDonasi({
   dataPublish,
-  countDonatur
+  countDonatur,
+  userLoginId
 }: {
   dataPublish: MODEL_DONASI;
-  countDonatur: number
+  countDonatur: number,
+  userLoginId: string
 }) {
   const [donasi, setDonasi] = useState(dataPublish);
   return (
     <>
       {/* <pre>{JSON.stringify(donasi,null,2)}</pre> */}
       <Stack spacing={40}>
-        <ComponentDonasi_DetailDataMain donasi={donasi} countDonatur={countDonatur} />
+        <ComponentDonasi_DetailDataMain donasi={donasi} countDonatur={countDonatur} userLoginId={userLoginId}/>
         <ComponentDonasi_InformasiPenggalangMain author={donasi.Author}/>
         <ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
       </Stack>
diff --git a/src/app_modules/donasi/detail/detail_publish/layout.tsx b/src/app_modules/donasi/detail/detail_publish/layout.tsx
index ecb5a50e..fae908ab 100644
--- a/src/app_modules/donasi/detail/detail_publish/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_publish/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconEdit, IconMessageShare } from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 
@@ -17,7 +17,7 @@ export default function LayoutDetailPublishDonasi({
     <>
       <AppShell
         header={
-          <HeaderTamplateDonasi
+          <ComponentDonasi_HeaderTamplate
             title="Detail Publish"
             icon={<IconMessageShare />}
             route2={RouterDonasi.list_kabar + `${donasiId}`}
diff --git a/src/app_modules/donasi/detail/detail_reject/index.tsx b/src/app_modules/donasi/detail/detail_reject/index.tsx
index b5be2426..fd466a1d 100644
--- a/src/app_modules/donasi/detail/detail_reject/index.tsx
+++ b/src/app_modules/donasi/detail/detail_reject/index.tsx
@@ -37,6 +37,7 @@ import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
 import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
+import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
 
 export default function DetailRejectDonasi({
   dataReject,
@@ -92,8 +93,15 @@ function ButtonAction({ donasiId }: { donasiId: string }) {
     setTabsPostingDonasi("Draft");
   }
   async function onDelete() {
-    router.push(RouterDonasi.main_galang_dana);
-    setTabsPostingDonasi("Reject");
+    await Donasi_funDeleteDonasiById(donasiId).then((res) => {
+      if (res.status === 200) {
+        router.push(RouterDonasi.main_galang_dana);
+        setTabsPostingDonasi("Reject");
+        NotifBerhasil(res.message);
+      } else {
+        NotifGagal(res.message);
+      }
+    });
   }
   return (
     <>
diff --git a/src/app_modules/donasi/detail/detail_reject/layout.tsx b/src/app_modules/donasi/detail/detail_reject/layout.tsx
index e73ce477..c07ab433 100644
--- a/src/app_modules/donasi/detail/detail_reject/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_reject/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconEdit, IconMessageShare } from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 
@@ -14,7 +14,7 @@ export default  function LayoutDetailRejectDonasi({
   
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Detail Reject"  />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Detail Reject"  />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/detail/detail_review/layout.tsx b/src/app_modules/donasi/detail/detail_review/layout.tsx
index df67b33d..6a8801fa 100644
--- a/src/app_modules/donasi/detail/detail_review/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_review/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconEdit, IconMessageShare } from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 
@@ -14,7 +14,7 @@ export default  function LayoutDetailReviewDonasi({
   
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Detail Review"  />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Detail Review"  />}>
         {children}
       </AppShell>
     </>
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 08e2428e..d43a789e 100644
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
@@ -121,7 +121,7 @@ export default function EditCeritaPenggalangDonasi({
           radius={"xl"}
           onClick={() => onUpdate(router, value, file as any)}
         >
-          Simpan
+          Update
         </Button>
       </Stack>
       {/* <pre> {JSON.stringify(value.pembukaan, null, 2)}</pre> */}
diff --git a/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx b/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
index 5f54e8f6..b1411795 100644
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutEditCeritaPenggalangDonasi({
   children,
@@ -11,7 +11,7 @@ export default function LayoutEditCeritaPenggalangDonasi({
 }) {
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Update Cerita Penggalang" />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Update Cerita Penggalang" />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/edit/edit_donasi/layout.tsx b/src/app_modules/donasi/edit/edit_donasi/layout.tsx
index 5a39d408..1380687b 100644
--- a/src/app_modules/donasi/edit/edit_donasi/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutEditDonasi({
   children,
@@ -11,7 +11,7 @@ export default function LayoutEditDonasi({
 }) {
   return (
     <>
-      <AppShell header={<HeaderTamplateDonasi title="Edit Donasi" />}>
+      <AppShell header={<ComponentDonasi_HeaderTamplate title="Edit Donasi" />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/edit/edit_rekening/index.tsx b/src/app_modules/donasi/edit/edit_rekening/index.tsx
new file mode 100644
index 00000000..23261bc4
--- /dev/null
+++ b/src/app_modules/donasi/edit/edit_rekening/index.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Button, Stack, TextInput } from "@mantine/core";
+import { MODEL_DONASI } from "../../model/interface";
+import { useState } from "react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { Donasi_funUpdateRekening } from "../../fun/update/fun_update_rekening";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+
+export default function Donasi_EditRekening({
+  dataDonasi,
+}: {
+  dataDonasi: MODEL_DONASI;
+}) {
+  const router = useRouter();
+  const [donasi, setDonasi] = useState(dataDonasi);
+
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <Stack spacing={"sm"}>
+          <TextInput
+            withAsterisk
+            label="Nama Bank"
+            placeholder="Masukan Nama Bank"
+            value={donasi.namaBank}
+            onChange={(val) =>
+              setDonasi({
+                ...donasi,
+                namaBank: _.upperCase(val.target.value),
+              })
+            }
+          />
+          <TextInput
+            withAsterisk
+            label="Nomor Rekening"
+            placeholder="Masukkan Nomor Rekening"
+            value={donasi.rekening}
+            onChange={(val) =>
+              setDonasi({
+                ...donasi,
+                rekening: val.target.value,
+              })
+            }
+          />
+        </Stack>
+        <Button radius={"xl"} onClick={() => onUpdate(router, donasi)}>
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onUpdate(router: AppRouterInstance, donasi: MODEL_DONASI) {
+  await Donasi_funUpdateRekening(donasi).then((res) => {
+    if (res.status === 200) {
+      router.back();
+      NotifBerhasil(res.message);
+    } else {
+      NotifGagal(res.message);
+    }
+  });
+}
diff --git a/src/app_modules/donasi/edit/edit_rekening/layout.tsx b/src/app_modules/donasi/edit/edit_rekening/layout.tsx
new file mode 100644
index 00000000..13405243
--- /dev/null
+++ b/src/app_modules/donasi/edit/edit_rekening/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutDonasi_EditRekening({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentDonasi_HeaderTamplate title="Edit Rekening" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/donasi/edit/list_kabar/index.tsx b/src/app_modules/donasi/edit/list_kabar/index.tsx
index 3ba73aee..8911e75b 100644
--- a/src/app_modules/donasi/edit/list_kabar/index.tsx
+++ b/src/app_modules/donasi/edit/list_kabar/index.tsx
@@ -55,7 +55,7 @@ export default function ListKabarDonasi({
         >
           {kabar.map((e, i) => (
            <Box key={i}>
-            <ComponentDonasi_ListKabar kabar={e}/>
+            <ComponentDonasi_ListKabar kabar={e} route={RouterDonasi.update_kabar}/>
            </Box>
           ))}
         </SimpleGrid>
diff --git a/src/app_modules/donasi/edit/list_kabar/layout.tsx b/src/app_modules/donasi/edit/list_kabar/layout.tsx
index 371e154f..0ca8f69e 100644
--- a/src/app_modules/donasi/edit/list_kabar/layout.tsx
+++ b/src/app_modules/donasi/edit/list_kabar/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -12,7 +12,7 @@ export default function LayoutListKabarDonasi({
   return (
     <>
       <AppShell 
-      header={<HeaderTamplateDonasi title="List Kabar" />}>
+      header={<ComponentDonasi_HeaderTamplate title="List Kabar" />}>
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/edit/update_kabar/index.tsx b/src/app_modules/donasi/edit/update_kabar/index.tsx
index fc18efea..4b40958d 100644
--- a/src/app_modules/donasi/edit/update_kabar/index.tsx
+++ b/src/app_modules/donasi/edit/update_kabar/index.tsx
@@ -25,23 +25,21 @@ export default function UpdateKabarDonasi({
   return (
     <>
       <Stack>
-        {/* <Group>
-          <Avatar variant="filled" radius={"xl"} />
-          <Stack spacing={0}>
-            <Text>Username</Text>
-          </Stack>
-        </Group> */}
         <Stack>
           <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
           <Title order={5}>{kabar.title}</Title>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image
-                alt="Foro"
-                src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
-              />
-            </Paper>
-          </AspectRatio>
+          {kabar.imagesId === null ? (
+            ""
+          ) : (
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt="Foro"
+                  src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
+                />
+              </Paper>
+            </AspectRatio>
+          )}
           <Text>{kabar.deskripsi}</Text>
         </Stack>
       </Stack>
diff --git a/src/app_modules/donasi/edit/update_kabar/layout.tsx b/src/app_modules/donasi/edit/update_kabar/layout.tsx
index 5e563c09..32114a55 100644
--- a/src/app_modules/donasi/edit/update_kabar/layout.tsx
+++ b/src/app_modules/donasi/edit/update_kabar/layout.tsx
@@ -12,7 +12,7 @@ import {
 import { useRouter } from "next/navigation";
 import React from "react";
 import FooterDonasi from "../../component/footer_close_donasi";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { Donasi_funDeleteKabar } from "../../fun/delete/fun_delete.kabar";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
@@ -30,7 +30,7 @@ export default function LayoutUpdateKabarDonasi({
   return (
     <>
       <AppShell
-        header={<HeaderTamplateDonasi title="Update Kabar" />}
+        header={<ComponentDonasi_HeaderTamplate title="Update Kabar" />}
         footer={
           <Footer height={70}>
             <Group align="center" h={"100%"} position="center" spacing={"xl"}>
diff --git a/src/app_modules/donasi/fun/create/fun_create_donasi.ts b/src/app_modules/donasi/fun/create/fun_create_donasi.ts
index 4a7b1414..75584430 100644
--- a/src/app_modules/donasi/fun/create/fun_create_donasi.ts
+++ b/src/app_modules/donasi/fun/create/fun_create_donasi.ts
@@ -19,6 +19,8 @@ export async function Donasi_funCreate(req: MODEL_DONASI, file: FormData) {
       donasiMaster_KategoriId: body.donasiMaster_KategoriId,
       imagesId: body.imagesId,
       authorId: body.authorId,
+      namaBank: body.namaBank,
+      rekening: body.rekening
     },
   });
 
diff --git a/src/app_modules/donasi/fun/create/fun_create_kabar.ts b/src/app_modules/donasi/fun/create/fun_create_kabar.ts
index 92c96c88..3474cb06 100644
--- a/src/app_modules/donasi/fun/create/fun_create_kabar.ts
+++ b/src/app_modules/donasi/fun/create/fun_create_kabar.ts
@@ -12,39 +12,55 @@ export async function Donasi_funCreateKabar(
   req: MODEL_DONASI_KABAR | any,
   file: FormData
 ) {
-  const dataImage: any = file.get("file");
-  const fileName = dataImage.name;
-  const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
-  const fRandomName = v4(fileName) + "." + fileExtension;
-
-  const upload = await prisma.images.create({
-    data: {
-      url: fRandomName,
-      label: "DONASI_KABAR"
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!upload) return { status: 400, message: "Gagal upload gambar" };
-  const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
-  fs.writeFileSync(`./public/donasi/kabar/${upload.url}`, uploadFolder);
-
   const create = await prisma.donasi_Kabar.create({
     data: {
       title: req.title,
       deskripsi: req.deskripsi,
       donasiId: req.donasiId,
-      imagesId: upload.id
     },
   });
 
-  if(!create) return {status: 400, message: "Gagal membuat data"}
-  revalidatePath("/dev/donasi/list_kabar")
-  return{
-    status: 200,
-     message: "Berhasil disimpan"
+  if (!create) return { status: 400, message: "Gagal membuat data" };
+
+  const dataImage: any = file.get("file");
+  if (dataImage !== "null") {
+    const fileName = dataImage.name;
+    const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
+    const fRandomName = v4(fileName) + "." + fileExtension;
+
+    const upload = await prisma.images.create({
+      data: {
+        url: fRandomName,
+        label: "DONASI_KABAR",
+      },
+      select: {
+        id: true,
+        url: true,
+      },
+    });
+
+    if (!upload) return { status: 400, message: "Gagal upload gambar" };
+    const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
+    fs.writeFileSync(`./public/donasi/kabar/${upload.url}`, uploadFolder);
+
+    const updateKabar = await prisma.donasi_Kabar.update({
+      where: {
+        id: create.id,
+      },
+      data: {
+        imagesId: upload.id,
+      },
+    });
+
+    if (!updateKabar) return { status: 400, message: "Gagal upload gambar" };
   }
+
+  
+
+  revalidatePath("/dev/donasi/list_kabar");
+  return {
+    status: 200,
+    message: "Berhasil disimpan",
+    kabarId: create.id
+  };
 }
diff --git a/src/app_modules/donasi/fun/create/fun_create_notif.ts b/src/app_modules/donasi/fun/create/fun_create_notif.ts
new file mode 100644
index 00000000..25af50ed
--- /dev/null
+++ b/src/app_modules/donasi/fun/create/fun_create_notif.ts
@@ -0,0 +1,41 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import _ from "lodash";
+import { revalidatePath } from "next/cache";
+
+export async function Donasi_funCreateNotif(donasiId: string, kabarId: string) {
+  const dataDonatur = await prisma.donasi_Invoice.findMany({
+    where: {
+      donasiId: donasiId,
+    },
+    select: {
+      id: true,
+      authorId: true,
+    },
+  });
+
+  const group = _.map(_.groupBy(dataDonatur, "authorId"), (v: any) => ({
+    authorId: v[0].authorId,
+  }));
+
+  // console.log(donasiId,dataDonatur, group);
+
+  const createNotif = group.map(
+    async (e) =>
+      await prisma.donasi_Notif.create({
+        data: {
+          userId: e.authorId,
+          donasi_KabarId: kabarId,
+        },
+      })
+  );
+
+  if (!createNotif) return { status: 400, message: "Gagal membuat notif" };
+  revalidatePath(RouterDonasi.main_beranda);
+  return {
+    status: 200,
+    message: "Notif terkirim",
+  };
+}
diff --git a/src/app_modules/donasi/fun/delete/fin_delete_donasi_by_id.ts b/src/app_modules/donasi/fun/delete/fin_delete_donasi_by_id.ts
new file mode 100644
index 00000000..5b8fb401
--- /dev/null
+++ b/src/app_modules/donasi/fun/delete/fin_delete_donasi_by_id.ts
@@ -0,0 +1,97 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import fs from "fs";
+
+export async function Donasi_funDeleteDonasiById(donasiId: string) {
+  const findDonasi = await prisma.donasi.findFirst({
+    where: {
+      id: donasiId,
+    },
+    select: {
+      imagesId: true,
+      CeritaDonasi: {
+        select: {
+          id: true,
+          imagesId: true,
+        },
+      },
+    },
+  });
+  if (!findDonasi) return { status: 400, message: "Data tidak ditemukan" };
+
+  //   const findGambar = await prisma.images.findFirst({
+  //     where: {
+  //       id: findDonasi.imagesId as any,
+  //     },
+  //     select: {
+  //       url: true,
+  //     },
+  //   });
+
+  //   const findGambarCerita = await prisma.images.findFirst({
+  //     where: {
+  //       id: findDonasi.CeritaDonasi?.imagesId as any,
+  //     },
+  //     select: {
+  //       url: true,
+  //     },
+  //   });
+
+  if (findDonasi.imagesId !== null) {
+    const delGambar = await prisma.images.delete({
+      where: {
+        id: findDonasi.imagesId as any,
+      },
+      select: {
+        url: true,
+      },
+    });
+
+    const delFromFileGambar = fs.unlinkSync(
+      `./public/donasi/image/${delGambar?.url}`
+    );
+
+    if (delFromFileGambar as any)
+      return { status: 400, message: "Gagal hapus gambar" };
+  }
+
+  if (findDonasi.CeritaDonasi?.imagesId !== null) {
+    const delGambarCerita = await prisma.images.delete({
+      where: {
+        id: findDonasi.CeritaDonasi?.imagesId as any,
+      },
+      select: {
+        url: true,
+      },
+    });
+
+    const delFromFileGambarCerita = fs.unlinkSync(
+      `./public/donasi/image_cerita/${delGambarCerita?.url}`
+    );
+
+    if (delFromFileGambarCerita as any)
+      return { status: 400, message: "Gagal hapus gambar cerita" };
+  }
+
+  const delCerita = await prisma.donasi_Cerita.delete({
+    where: {
+      id: findDonasi.CeritaDonasi?.id,
+    },
+  });
+
+  if(!delCerita) return {status: 400, message: "Gagal hapus data cerita"}
+
+  const delDonasi = await prisma.donasi.delete({
+    where: {
+      id: donasiId,
+    },
+  });
+
+  if (!delDonasi) return { status: 400, message: "Gagal hapus data donasi" };
+
+  return {
+    status: 200,
+    message: "Berhasil hapus",
+  };
+}
diff --git a/src/app_modules/donasi/fun/delete/fun_delete.kabar.ts b/src/app_modules/donasi/fun/delete/fun_delete.kabar.ts
index 81d105e9..985cb842 100644
--- a/src/app_modules/donasi/fun/delete/fun_delete.kabar.ts
+++ b/src/app_modules/donasi/fun/delete/fun_delete.kabar.ts
@@ -5,7 +5,7 @@ import fs from "fs";
 import { revalidatePath } from "next/cache";
 
 export async function Donasi_funDeleteKabar(kabarId: string) {
-  const del = await prisma.donasi_Kabar.delete({
+  const dataKabar = await prisma.donasi_Kabar.findFirst({
     where: {
       id: kabarId,
     },
@@ -13,21 +13,37 @@ export async function Donasi_funDeleteKabar(kabarId: string) {
       imagesId: true,
     },
   });
-  if (!del) return { status: 400, message: "Gagal hapus data" };
 
-  const delImg = await prisma.images.delete({
+  if (dataKabar?.imagesId !== null) {
+    const delImg = await prisma.images.delete({
+      where: {
+        id: dataKabar?.imagesId,
+      },
+      select: {
+        url: true,
+      },
+    });
+
+    if (!delImg) return { status: 400, message: "Gagal hapus gambar" };
+    if (delImg) fs.unlinkSync(`./public/donasi/kabar/${delImg.url}`);
+    revalidatePath("/dev/donasi/list_kabar");
+  }
+
+  const delNotif = await prisma.donasi_Notif.deleteMany({
     where: {
-      id: del.imagesId as any,
-    },
-    select: {
-      url: true,
+      donasi_KabarId: kabarId,
     },
   });
+  if (!delNotif) return { status: 400, message: "Gagal hapus notif" };
 
-  if (!delImg) return { status: 400, message: "Gagal hapus gambar" };
-  if (delImg) fs.unlinkSync(`./public/donasi/kabar/${delImg.url}`);
-  revalidatePath("/dev/donasi/list_kabar");
+  const del = await prisma.donasi_Kabar.delete({
+    where: {
+      id: kabarId,
+    },
+  });
+  if (!del) return { status: 400, message: "Gagal hapus data" };
 
+  revalidatePath("/dev/donasi/notif_page");
   return {
     status: 200,
     message: "Berhasl hapus",
diff --git a/src/app_modules/donasi/fun/get/get_donatur_by_token_id.ts b/src/app_modules/donasi/fun/get/get_donatur_by_token_id.ts
new file mode 100644
index 00000000..0d2839b8
--- /dev/null
+++ b/src/app_modules/donasi/fun/get/get_donatur_by_token_id.ts
@@ -0,0 +1,22 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function Donasi_findDonaturByTokenId(
+  donasiId: string,
+  userId: string
+) {
+  const data = await prisma.donasi_Invoice.count({
+    where: {
+      donasiId: donasiId,
+      authorId: userId,
+    },
+  });
+
+  if (data > 0) {
+    return true;
+  } else {
+    return false;
+  }
+
+}
diff --git a/src/app_modules/donasi/fun/get/get_list_pencairan_dana_by_id.ts b/src/app_modules/donasi/fun/get/get_list_pencairan_dana_by_id.ts
new file mode 100644
index 00000000..af192335
--- /dev/null
+++ b/src/app_modules/donasi/fun/get/get_list_pencairan_dana_by_id.ts
@@ -0,0 +1,15 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function Donasi_getListPencairanDanaById(donasiId:string) {
+    const data = await prisma.donasi_PencairanDana.findMany({
+        where: {
+            donasiId: donasiId
+        }
+    })
+
+    // console.log(data)
+
+    return data
+}
\ No newline at end of file
diff --git a/src/app_modules/donasi/fun/get/get_notif_by_user_id.ts b/src/app_modules/donasi/fun/get/get_notif_by_user_id.ts
new file mode 100644
index 00000000..75411f84
--- /dev/null
+++ b/src/app_modules/donasi/fun/get/get_notif_by_user_id.ts
@@ -0,0 +1,32 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function Donasi_getNotifByUserId(userId: string) {
+  const dataInvoice = await prisma.donasi_Invoice.findFirst({
+    where: {
+      authorId: userId
+    }
+  })
+
+  // console.log(dataInvoice)
+
+  // return null
+  const dataNotif = await prisma.donasi_Notif.findMany({
+    orderBy: {
+      createdAt: "desc"
+    },
+    where: {
+      userId: userId,
+    },
+    select: {
+      id: true,
+      isRead: true,
+      active: true,
+      createdAt: true,
+      donasi_KabarId: true,
+      Donasi_Kabar: true,
+    },
+  });
+  return dataNotif;
+}
diff --git a/src/app_modules/donasi/fun/get/get_one_donasi_by_id.ts b/src/app_modules/donasi/fun/get/get_one_donasi_by_id.ts
index 214ae053..a097b33e 100644
--- a/src/app_modules/donasi/fun/get/get_one_donasi_by_id.ts
+++ b/src/app_modules/donasi/fun/get/get_one_donasi_by_id.ts
@@ -20,6 +20,8 @@ export async function Donasi_getOneById(donasiId: string) {
       progres: true,
       terkumpul: true,
       imagesId: true,
+      namaBank: true,
+      rekening: true,
       donasiMaster_KategoriId: true,
       donasiMaster_DurasiId: true,
       donasiMaster_StatusDonasiId: true,
diff --git a/src/app_modules/donasi/fun/get/get_one_invoice_by_id.tsx b/src/app_modules/donasi/fun/get/get_one_invoice_by_id.tsx
index ff9b66dc..40b3b45e 100644
--- a/src/app_modules/donasi/fun/get/get_one_invoice_by_id.tsx
+++ b/src/app_modules/donasi/fun/get/get_one_invoice_by_id.tsx
@@ -12,6 +12,7 @@ export async function Donasi_getOneInvoiceById(invoiceId: string) {
       id: true,
       nominal: true,
       donasiId: true,
+      createdAt: true,
       donasiMaster_BankId: true,
       donasiMaster_StatusInvoiceId: true,
       Donasi: {
diff --git a/src/app_modules/donasi/fun/get/get_pencairan_dana_by_id.ts b/src/app_modules/donasi/fun/get/get_pencairan_dana_by_id.ts
new file mode 100644
index 00000000..988a465d
--- /dev/null
+++ b/src/app_modules/donasi/fun/get/get_pencairan_dana_by_id.ts
@@ -0,0 +1,19 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function Donasi_getTotalPencairanDanaById(donasiId: string) {
+  const data = await prisma.donasi.findFirst({
+    where: {
+      id: donasiId,
+    },
+    select: {
+      id: true,
+      totalPencairan: true,
+      akumulasiPencairan: true,
+      authorId: true
+    },
+  });
+
+  return data;
+}
diff --git a/src/app_modules/donasi/fun/update/fun_update_invoice.ts b/src/app_modules/donasi/fun/update/fun_update_invoice.ts
new file mode 100644
index 00000000..e7ffed57
--- /dev/null
+++ b/src/app_modules/donasi/fun/update/fun_update_invoice.ts
@@ -0,0 +1,47 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import _ from "lodash";
+import { v4 } from "uuid";
+import fs from "fs";
+
+export async function Donasi_funUploadBuktiTransferById(
+  invoiceId: string,
+  file: FormData
+) {
+  // console.log(file);
+  const gambar: any = file.get("file");
+  const fileName = gambar.name;
+  const fileExtension = _.lowerCase(gambar.name.split(".").pop());
+  const fileRandomName = v4(fileName) + "." + fileExtension;
+
+  const upload = await prisma.images.create({
+    data: {
+      url: fileRandomName,
+      label: "DONASI_INVOICE"
+    },
+    select: {
+      id: true,
+      url: true,
+    },
+  });
+
+  if (!upload) return { status: 400, message: "Gagal upload gambar" };
+  const uploadFolder = Buffer.from(await gambar.arrayBuffer());
+  fs.writeFileSync(`./public/donasi/invoice/${upload.url}`, uploadFolder);
+
+  const updateFile = await prisma.donasi_Invoice.update({
+    where: {
+      id: invoiceId,
+    },
+    data: {
+      imagesId: upload.id,
+    },
+  });
+
+  if (!updateFile) return { status: 400, message: "Gagal update gambar" };
+  return {
+    status: 200,
+    message: "Berhasil upload",
+  };
+}
diff --git a/src/app_modules/donasi/fun/update/fun_update_notif_by_user_id.ts b/src/app_modules/donasi/fun/update/fun_update_notif_by_user_id.ts
new file mode 100644
index 00000000..a2913790
--- /dev/null
+++ b/src/app_modules/donasi/fun/update/fun_update_notif_by_user_id.ts
@@ -0,0 +1,21 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { revalidatePath } from "next/cache";
+
+export async function Donasi_funUpdateNotifById(notifId: string) {
+  const updateNotif = await prisma.donasi_Notif.update({
+    where: {
+      id: notifId,
+    },
+    data: {
+      isRead: true,
+    },
+  });
+  if (!updateNotif) return { status: 400, message: "Update notif gagal" };
+  revalidatePath("/dev/donasi/notif_page");
+  return {
+    status: 200,
+    message: "Berhasil update notif",
+  };
+}
diff --git a/src/app_modules/donasi/fun/update/fun_update_rekening.ts b/src/app_modules/donasi/fun/update/fun_update_rekening.ts
new file mode 100644
index 00000000..bcb3a358
--- /dev/null
+++ b/src/app_modules/donasi/fun/update/fun_update_rekening.ts
@@ -0,0 +1,23 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_DONASI } from "../../model/interface";
+
+export async function Donasi_funUpdateRekening(data: MODEL_DONASI) {
+  // console.log(data)
+  const res = await prisma.donasi.update({
+    where: {
+      id: data.id,
+    },
+    data: {
+      namaBank: data.namaBank,
+      rekening: data.rekening,
+    },
+  });
+
+  if (!res) return { status: 400, message: "Gagal update rekening" };
+  return {
+    status: 200,
+    message: "Berhasil update",
+  };
+}
diff --git a/src/app_modules/donasi/index.ts b/src/app_modules/donasi/index.ts
index 10966d5a..3993923a 100644
--- a/src/app_modules/donasi/index.ts
+++ b/src/app_modules/donasi/index.ts
@@ -50,6 +50,10 @@ import Donasi_CreateKabar from "./create/create_kabar";
 import LayoutDonasi_CreateKabar from "./create/create_kabar/layout";
 import Donasi_NotifPage from "./main/notif/notif_page";
 import LayoutDonasi_NotifPage from "./main/notif/layout";
+import Donasi_DetailNotif from "./detail/deail_notif";
+import LayoutDonasi_DetailNotif from "./detail/deail_notif/layout";
+import Donasi_EditRekening from "./edit/edit_rekening";
+import LayoutDonasi_EditRekening from "./edit/edit_rekening/layout";
 
 export {
   MainDonasi,
@@ -104,4 +108,8 @@ export {
   LayoutDonasi_CreateKabar,
   Donasi_NotifPage,
   LayoutDonasi_NotifPage,
+  Donasi_DetailNotif,
+  LayoutDonasi_DetailNotif,
+  Donasi_EditRekening,
+  LayoutDonasi_EditRekening,
 };
diff --git a/src/app_modules/donasi/main/layout.tsx b/src/app_modules/donasi/main/layout.tsx
index 9df8fcde..5777b348 100644
--- a/src/app_modules/donasi/main/layout.tsx
+++ b/src/app_modules/donasi/main/layout.tsx
@@ -14,7 +14,7 @@ import {
   Title,
 } from "@mantine/core";
 import React, { useState } from "react";
-import HeaderTamplateDonasi from "../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../component/header_tamplate";
 
 import {
   IconBell,
@@ -33,11 +33,16 @@ import { useAtom } from "jotai";
 import { gs_donasi_hot_menu } from "../global_state";
 import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 import { title } from "process";
+import _ from "lodash";
 
 export default function LayoutDonasi({
   children,
+  userId,
+  isRead,
 }: {
   children: React.ReactNode;
+  userId: string;
+  isRead: boolean[];
 }) {
   const router = useRouter();
   const [active, setActive] = useAtom(gs_donasi_hot_menu);
@@ -72,10 +77,22 @@ export default function LayoutDonasi({
                 <IconChevronLeft />
               </ActionIcon>
               <Title order={5}>Donasi</Title>
-              <ActionIcon radius={"md"}  variant="transparent" onClick={() => router.push(RouterDonasi.notif_page + `${"123"}`)}>
-                <Indicator processing color="orange" >
+              <ActionIcon
+                radius={"md"}
+                variant="transparent"
+                onClick={() =>
+                  router.push(RouterDonasi.notif_page + `${userId}`)
+                }
+              >
+                {_.isEmpty(isRead) ? (
                   <IconBell />
-                </Indicator>
+                ) : isRead.includes(false) ? (
+                  <Indicator processing color="orange">
+                    <IconBell />
+                  </Indicator>
+                ) : (
+                  <IconBell />
+                )}
               </ActionIcon>
             </Group>
           </Header>
@@ -112,6 +129,7 @@ export default function LayoutDonasi({
           </Footer>
         }
       >
+        {/* {JSON.stringify(isRead)} */}
         {children}
       </AppShell>
     </>
diff --git a/src/app_modules/donasi/main/notif/layout.tsx b/src/app_modules/donasi/main/notif/layout.tsx
index 0ae6d7d5..c914e483 100644
--- a/src/app_modules/donasi/main/notif/layout.tsx
+++ b/src/app_modules/donasi/main/notif/layout.tsx
@@ -2,12 +2,12 @@
 
 import { AppShell } from "@mantine/core"
 import React from "react"
-import HeaderTamplateDonasi from "../../component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
 
 export default function LayoutDonasi_NotifPage({children}: {children: React.ReactNode}){
     return<>
     <AppShell
-    header={<HeaderTamplateDonasi title="Pemberitahuan"/>}
+    header={<ComponentDonasi_HeaderTamplate title="Pemberitahuan"/>}
     >
 
         {children}
diff --git a/src/app_modules/donasi/main/notif/notif_page.tsx b/src/app_modules/donasi/main/notif/notif_page.tsx
index b1933f84..87542a88 100644
--- a/src/app_modules/donasi/main/notif/notif_page.tsx
+++ b/src/app_modules/donasi/main/notif/notif_page.tsx
@@ -1,8 +1,90 @@
-"use client"
+"use client";
 
-export default function Donasi_NotifPage() {
-    return<>
-    ini halaman notif
-    
+import { useState } from "react";
+import { MODEL_DONASI_NOTIF } from "../../model/interface";
+import {
+  Box,
+  Group,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import moment from "moment";
+
+import kabar from "../../detail/detail_main/kabar";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { Donasi_funUpdateNotifById } from "../../fun/update/fun_update_notif_by_user_id";
+import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import { useRouter } from "next/navigation";
+
+export default function Donasi_NotifPage({
+  dataNotif,
+}: {
+  dataNotif: MODEL_DONASI_NOTIF[];
+}) {
+  const router = useRouter();
+  const [notif, setNotif] = useState(dataNotif);
+  return (
+    <>
+      <Box>
+        {/* <pre>{JSON.stringify(notif, null, 2)}</pre> */}
+        <SimpleGrid
+          cols={4}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "md", cols: 3, spacing: "md" },
+            { maxWidth: "sm", cols: 2, spacing: "sm" },
+            { maxWidth: "xs", cols: 1, spacing: "sm" },
+          ]}
+        >
+          {notif.map((e) => (
+            <Paper
+              key={e.id}
+              bg={e.isRead === false ? "gray.5" : "gray.1"}
+              p={"sm"}
+            >
+              <Stack spacing={"xs"}>
+                <Stack>
+                  <Group position="apart">
+                    <Text fw={"bold"} truncate>
+                      {e.Donasi_Kabar.title}
+                    </Text>
+                    <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
+                  </Group>
+                  <Stack spacing={0}>
+                    <Text lineClamp={2}>{e.Donasi_Kabar.deskripsi}</Text>
+                    <Text
+                      c={"blue"}
+                      onClick={() =>
+                        onClick(router as any, e.Donasi_Kabar.id, e.id)
+                      }
+                    >
+                      Buka Kabar
+                    </Text>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          ))}
+        </SimpleGrid>
+      </Box>
     </>
-}
\ No newline at end of file
+  );
+}
+
+async function onClick(
+  router: AppRouterInstance,
+  kabarId: string,
+  notifId: string
+) {
+  await Donasi_funUpdateNotifById(notifId).then((res) => {
+    if (res.status === 200) {
+      router.push(RouterDonasi.detail_notif + `${kabarId}`);
+    } else {
+      NotifGagal("Server Error");
+    }
+  });
+}
diff --git a/src/app_modules/donasi/model/interface.ts b/src/app_modules/donasi/model/interface.ts
index 5fe0d1d7..97bf6520 100644
--- a/src/app_modules/donasi/model/interface.ts
+++ b/src/app_modules/donasi/model/interface.ts
@@ -14,6 +14,11 @@ export interface MODEL_DONASI {
   catatan: string;
   progres: string;
   terkumpul: string;
+  namaBank: string;
+  rekening: string;
+  akumulasiPencairan: number;
+  totalPencairan: number;
+
   authorId: string;
   donasiMaster_KategoriId: string;
   donasiMaster_DurasiId: string;
@@ -69,6 +74,7 @@ export interface MODEL_DONASI_INVOICE {
   id: string;
   nominal: string;
   donasiId: string;
+  imagesId: string
   active: boolean;
   createdAt: Date;
   updatedAt: Date;
@@ -110,3 +116,27 @@ export interface MODEL_DONASI_KABAR {
   Donasi: MODEL_DONASI;
   ImagesKabar: MODEL_IMAGES;
 }
+
+export interface MODEL_DONASI_NOTIF {
+  id: string;
+  isRead: boolean;
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  userId: string;
+  donasi_KabarId: string;
+  Donasi_Kabar: MODEL_DONASI_KABAR;
+}
+
+export interface MODEL_DONASI_PENCAIRAN_DANA {
+  id: string;
+  nominalCair: number;
+  title: string;
+  deskripsi: string;
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  donasiId: string;
+  imagesId: string
+  Donasi: MODEL_DONASI;
+}
diff --git a/src/app_modules/donasi/proses_donasi/invoice/index.tsx b/src/app_modules/donasi/proses_donasi/invoice/index.tsx
index 48c12cf6..5a7f51de 100644
--- a/src/app_modules/donasi/proses_donasi/invoice/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/index.tsx
@@ -5,6 +5,8 @@ import {
   Button,
   Center,
   CopyButton,
+  FileButton,
+  FileInput,
   Grid,
   Group,
   Paper,
@@ -24,6 +26,9 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
 import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import { Donasi_funUploadBuktiTransferById } from "../../fun/update/fun_update_invoice";
+import { buffer } from "stream/consumers";
+import { IconCamera, IconCheck, IconCircleCheck } from "@tabler/icons-react";
 
 export default function Donasi_InvoiceProses({
   dataInvoice,
@@ -32,6 +37,9 @@ export default function Donasi_InvoiceProses({
 }) {
   const [invoice, setDataInvoice] = useState(dataInvoice);
   const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [image, setImage] = useState<any | null>(null);
+
   return (
     <>
       <Stack spacing={"lg"}>
@@ -87,15 +95,13 @@ export default function Donasi_InvoiceProses({
                 <Grid.Col span={8}>
                   <Group position="left" align="center" h={"100%"}>
                     <Title order={4}>
-                      <TampilanRupiahDonasi
-                        nominal={+(+invoice.nominal + 2500)}
-                      />
+                      <TampilanRupiahDonasi nominal={+(+invoice.nominal)} />
                     </Title>
                   </Group>
                 </Grid.Col>
                 <Grid.Col span={4}>
                   <Group position="right">
-                    <CopyButton value={"" + (+invoice.nominal + 2500)}>
+                    <CopyButton value={"" + +invoice.nominal}>
                       {({ copied, copy }) => (
                         <Button
                           color={copied ? "teal" : "blue"}
@@ -117,7 +123,58 @@ export default function Donasi_InvoiceProses({
           </Stack>
         </Paper>
 
-        <Paper p={"sm"} withBorder>
+        <Paper p={"md"} withBorder>
+          <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");
+                    // console.log(files, " ini file");
+                    setFile(files);
+                    onUpload(invoice.id, files);
+                  } catch (error) {
+                    console.log(error);
+                  }
+                }}
+                accept="image/png,image/jpeg"
+              >
+                {(props) => (
+                  <Button
+                    {...props}
+                    radius={"xl"}
+                    variant="outline"
+                    w={150}
+                    leftIcon={<IconCamera />}
+                  >
+                    Upload
+                  </Button>
+                )}
+              </FileButton>
+            </Center>
+            {file ? (
+              <Center>
+                <Group spacing={"xs"}>
+                  <Text fz={"xs"} fs={"italic"}>
+                    Upload berhasil{" "}
+                  </Text>
+                  <IconCircleCheck color="green" />
+                </Group>
+              </Center>
+            ) : (
+              <Center>
+                <Text fz={"xs"} fs={"italic"}>
+                  Upload bukti transfer anda !
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Paper>
+
+        {/* <Paper p={"sm"} withBorder>
           <Stack>
             <Text>Detail donasi</Text>
             <Paper p={"md"} bg={"gray.2"}>
@@ -141,16 +198,28 @@ export default function Donasi_InvoiceProses({
               </Stack>
             </Paper>
           </Stack>
-        </Paper>
+        </Paper> */}
 
-        <Button
-          radius={"xl"}
-          bg={"orange"}
-          color="orange"
-          onClick={() => onClick(router, invoice.id)}
-        >
-          Saya Sudah Transfer
-        </Button>
+        {file !== null ? (
+          <Button
+            radius={"xl"}
+            bg={"orange"}
+            color="orange"
+            onClick={() => onClick(router, invoice.id)}
+          >
+            Saya Sudah Transfer
+          </Button>
+        ) : (
+          <Button
+            disabled
+            radius={"xl"}
+            //  bg={"orange"}
+            //  color="orange"
+            //  onClick={() => onClick(router, invoice.id)}
+          >
+            Menunggu Bukti Transfer
+          </Button>
+        )}
       </Stack>
     </>
   );
@@ -166,3 +235,16 @@ async function onClick(router: AppRouterInstance, invoiceId: string) {
     }
   });
 }
+
+async function onUpload(invoiceId: string, file: FormData) {
+  const gambar = new FormData();
+  gambar.append("file", file as any);
+
+  await Donasi_funUploadBuktiTransferById(invoiceId, gambar).then((res) => {
+    if (res.status === 200) {
+      NotifBerhasil(res.message);
+    } else {
+      NotifGagal(res.message);
+    }
+  });
+}
diff --git a/src/app_modules/donasi/proses_donasi/invoice/layout.tsx b/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
index 47c02dfe..58938b72 100644
--- a/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
@@ -2,7 +2,7 @@
 
 import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconChevronLeft, IconX } from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { gs_donasi_hot_menu } from "../../global_state";
diff --git a/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx b/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx
index 84a572b0..a97847e3 100644
--- a/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutMasukanDonasi({
   children,
@@ -12,7 +12,7 @@ export default function LayoutMasukanDonasi({
   return (
     <>
       <AppShell
-        header={<HeaderTamplateDonasi title="Masukan Nominal Donasi" />}
+        header={<ComponentDonasi_HeaderTamplate title="Masukan Nominal Donasi" />}
       >
         {children}
       </AppShell>
diff --git a/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx b/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
index c64996df..7080a719 100644
--- a/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate"
 import { AppShell } from "@mantine/core"
 import React from "react"
 
@@ -8,7 +8,7 @@ import React from "react"
 export default function LayoutDonasi_MetodePembayaran({children}: {children: React.ReactNode}){
     return<>
     <AppShell
-    header={<HeaderTamplateDonasi title="Pilih Metode Pembayaran"/>}
+    header={<ComponentDonasi_HeaderTamplate title="Pilih Metode Pembayaran"/>}
     >
         {children}
     </AppShell>
diff --git a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
index b3018d8c..c0d9c3c1 100644
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  ActionIcon,
   Avatar,
   Box,
   Button,
@@ -11,6 +12,7 @@ import {
   Loader,
   Paper,
   Stack,
+  Text,
   Title,
 } from "@mantine/core";
 import invoice from "../invoice";
@@ -22,6 +24,10 @@ import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { useAtom } from "jotai";
 import { gs_donasi_hot_menu } from "../../global_state";
+import moment from "moment";
+import { IconBrandWhatsapp } from "@tabler/icons-react";
+import { Warna } from "@/app/lib/warna";
+import Link from "next/link";
 
 export default function Donasi_ProsesTransaksi({
   dataInvoice,
@@ -30,6 +36,7 @@ export default function Donasi_ProsesTransaksi({
 }) {
   const [invoice, setInvoice] = useState(dataInvoice);
   const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
+  const [countD, setCountD] = useState<Date | any>();
   const interval = useInterval(
     () =>
       reloadData(invoice.id).then((res) =>
@@ -47,28 +54,75 @@ export default function Donasi_ProsesTransaksi({
     return res;
   }
 
+  //-------------------------------------------------//
+
+  // const inter2 = useInterval(
+  //   () => cekCD().then((res) => console.log(res)),
+  //   1000
+  // );
+
+  // useShallowEffect(() => {
+  //   inter2.start();
+  // }, []);
+
+  async function cekCD() {
+    const date = new Date().getTime();
+    // const jam = date.toTimeString()
+    // const cd = moment(jam).diff((invoice.createdAt), "hour")
+    var a = moment.duration(date).asSeconds();
+    return a;
+  }
+
   if (invoice.donasiMaster_StatusInvoiceId === "1") {
-    
     redirect(RouterDonasi.detail_donasi_saya + `${invoice.id}`);
   }
 
   return (
     <>
-      <Paper p={"sm"} withBorder>
-        <Stack spacing={"md"}>
-          <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
-            <Stack align="center" justify="center">
-              <Title order={6}>Admin sedang memproses transaksimu</Title>
-              <Paper radius={1000} w={100} h={100}>
-                <Center h={"100%"}>
-                  <Loader size={"lg"} color="orange" variant="bars" />
-                </Center>
-              </Paper>
-              <Title order={6}>Mohon menunggu !</Title>
-            </Stack>
+      <Stack>
+        <Paper p={"sm"} withBorder>
+          <Stack spacing={"md"}>
+            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+              <Stack align="center" justify="center">
+                <Title order={6}>Admin sedang memproses transaksimu</Title>
+                <Paper radius={1000} w={100} h={100}>
+                  <Center h={"100%"}>
+                    <Loader size={"lg"} color="orange" variant="bars" />
+                  </Center>
+                </Paper>
+                <Title order={6}>Mohon menunggu !</Title>
+              </Stack>
+            </Paper>
+          </Stack>
+        </Paper>
+        <Paper p={"sm"} withBorder>
+          <Paper bg={"gray.1"} p={5} radius={"md"}>
+            <Group position="center">
+              <Stack spacing={0}>
+                <Text fz={"xs"} fs={"italic"}>
+                  Hubungi admin jika tidak kunjung di proses!
+                </Text>
+                <Text fz={"xs"} fs={"italic"}>
+                  Klik pada logo Whatsapp ini.
+                </Text>
+              </Stack>
+              <Link
+                color="white"
+                style={{
+                  color: "black",
+                  textDecoration: "none",
+                }}
+                target="_blank"
+                href={
+                  "https://wa.me/+6289697338821?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!"
+                }
+              >
+                <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
+              </Link>
+            </Group>
           </Paper>
-        </Stack>
-      </Paper>
+        </Paper>
+      </Stack>
     </>
   );
 }
diff --git a/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx b/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
index fa6d3207..beb21848 100644
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
@@ -2,7 +2,7 @@
 
 import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
diff --git a/zCoba.js b/zCoba.js
index 09f99bf7..c5d7a3b9 100644
--- a/zCoba.js
+++ b/zCoba.js
@@ -27,8 +27,8 @@ var fs = require("fs");
 // console.log('File deleted!');
 
 function CobaProgress() {
-  const t = 550000000;
-  const b = 250000000 + 275000000 * 2;
+  const t = 560000000;
+  const b = 180000000
 
   const progress = (b / t) * 100;
   const pembulatan = Math.round(progress);