Merge pull request #114 from bipproduction/donasi/upload

Fix: Image donasi

package.json

@@ -1,12 +1,12 @@
 {
   "name": "hipmi",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "prisma": {
     "seed": "npx tsx prisma/seed.ts"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev ",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -91,4 +91,4 @@
     "wibu-realtime": "bipproduction/wibu-realtime",
     "yaml": "^2.3.2"
   }
-}
+}

src/app/dev/donasi/create/cerita_penggalang/[id]/layout.tsx

@@ -1,4 +1,4 @@
-import { LayoutCreateDonasi } from "@/app_modules/donasi";
+import { LayoutCreateCeritaDonasi } from "@/app_modules/donasi/create";
 import React from "react";
 
 export default async function Layout({
@@ -8,7 +8,7 @@ export default async function Layout({
 }) {
   return (
     <>
-      <LayoutCreateDonasi>{children}</LayoutCreateDonasi>
+      <LayoutCreateCeritaDonasi>{children}</LayoutCreateCeritaDonasi>
     </>
   );
 }

src/app/dev/donasi/create/create_kabar/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/create/create_kabar/[id]/page.tsx

@@ -1,8 +1,10 @@
 import { Donasi_CreateKabar } from "@/app_modules/donasi";
 
-export default async function Page({params}: {params: {id: string}}) {
-    const donasiId = params.id
-    return<>
-    <Donasi_CreateKabar donasiId={donasiId}/>
+export default async function Page({ params }: { params: { id: string } }) {
+  const donasiId = params.id;
+  return (
+    <>
+      <Donasi_CreateKabar donasiId={donasiId} />
     </>
-}
+  );
+}

src/app/dev/donasi/detail/detail_main/[id]/layout.tsx

@@ -1,16 +0,0 @@
-import { LayoutDetailMainDonasi } from "@/app_modules/donasi";
-import React from "react";
-
-export default async function Layout({
-  children,
-  params
-}: {
-  children: React.ReactNode;
-  params: {id: string}
-}) {
-  return (
-    <>
-      <LayoutDetailMainDonasi donasiId={params.id}>{children}</LayoutDetailMainDonasi>
-    </>
-  );
-}

src/app/dev/donasi/detail/detail_notif/[id]/layout.tsx

@@ -1,22 +0,0 @@
-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>
-    </>
-  );
-}

src/app/dev/donasi/detail/detail_notif/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/detail/detail_notif/[id]/page.tsx

@@ -1,9 +0,0 @@
-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} />;
-}

src/app/dev/donasi/detail/main/[id]/layout.tsx

@@ -0,0 +1,29 @@
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { LayoutDetailMainDonasi } from "@/app_modules/donasi";
+import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+import React from "react";
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { id: string };
+}) {
+  const donasiId = params.id;
+  const getData = await Donasi_getOneById(donasiId);
+  const authorId = getData?.authorId;
+  const userLoginId = await funGetUserIdByToken();
+
+  return (
+    <>
+      <LayoutDetailMainDonasi
+        donasiId={donasiId}
+        authorId={authorId as any}
+        userLoginId={userLoginId}
+      >
+        {children}
+      </LayoutDetailMainDonasi>
+    </>
+  );
+}

src/app/dev/donasi/detail/publish/[id]/layout.tsx

@@ -8,9 +8,11 @@ export default async function Layout({
   children: React.ReactNode;
   params: { id: string };
 }) {
+  const donasiId = params.id;
+  
   return (
     <>
-      <LayoutDetailPublishDonasi donasiId={params.id}>
+      <LayoutDetailPublishDonasi donasiId={donasiId}>
         {children}
       </LayoutDetailPublishDonasi>
     </>

src/app/dev/donasi/detail/reject/[id]/page.tsx

@@ -4,8 +4,11 @@ import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_b
 export default async function Page({params}: {params: {id: string}}) {
     let donasiId= params.id
     const dataReject = await Donasi_getOneById(donasiId)
+    const fileIdImageCerita = dataReject?.CeritaDonasi?.imageId
 
-    return<>
-    <DetailRejectDonasi dataReject={dataReject as any}/>
-    </>
+    return (
+      <>
+        <DetailRejectDonasi dataReject={dataReject as any} fileIdImageCerita={fileIdImageCerita as any}/>
+      </>
+    );
 }

src/app/dev/donasi/edit/edit_cerita/[id]/page.tsx

@@ -3,7 +3,7 @@ import Donasi_getCeritaByDonasiId from "@/app_modules/donasi/fun/get/get_cerita_
 
 export default async function Page({ params }: { params: { id: string } }) {
   const dataCerita = await Donasi_getCeritaByDonasiId(params.id)
-  // console.log(dataCerita);
+
   return (
     <>
       <EditCeritaPenggalangDonasi dataCerita={dataCerita as any} />

src/app/dev/donasi/edit/kabar/[id]/page.tsx

@@ -0,0 +1,16 @@
+import { Donasi_UiEditKabar } from "@/app_modules/donasi/_ui";
+import { Donasi_getOneKabar } from "@/app_modules/donasi/fun/get/get_one_kabar";
+import React from "react";
+
+async function Page({ params }: { params: { id: string } }) {
+  const kabarId = params.id;
+  const dataKabar = await Donasi_getOneKabar(kabarId);
+
+  return (
+    <>
+      <Donasi_UiEditKabar dataKabar={dataKabar} />
+    </>
+  );
+}
+
+export default Page;

src/app/dev/donasi/kabar/[id]/page.tsx

@@ -1,13 +1,13 @@
 import { KabarDonasi } from "@/app_modules/donasi";
-import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
+import { Donasi_getOneKabar } from "@/app_modules/donasi/fun/get/get_one_kabar";
 
-export default async function Page({params}: {params: {id: string}}) {
-  const donasiId = params.id
-  const listKabar = await donasi_funGetListKabarById({ page: 1, donasiId : donasiId});
+export default async function Page({ params }: { params: { id: string } }) {
+  let kabarId = params.id;
+  const dataDonasi = await Donasi_getOneKabar(kabarId);
 
   return (
     <>
-      <KabarDonasi listKabar={listKabar as any} donasiId={donasiId} />
+      <KabarDonasi dataDonasi={dataDonasi as any} />
     </>
   );
 }

src/app/dev/donasi/kabar/daftar/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { Donasi_UiDaftarKabar } from "@/app_modules/donasi/_ui";
+import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
+
+async function Page({ params }: { params: { id: string } }) {
+  const donasiId = params.id;
+  const listKabar = await donasi_funGetListKabarById({
+    page: 1,
+    donasiId: donasiId,
+  });
+
+  return (
+    <>
+      <Donasi_UiDaftarKabar dataDonasi={listKabar as any} donasiId={donasiId}/>
+    </>
+  );
+}
+
+export default Page;

src/app/dev/donasi/kabar/rekap/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { Donasi_UiRekapKabar } from "@/app_modules/donasi/_ui";
+import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
+
+async function Page({ params }: { params: { id: string } }) {
+  const donasiId = params.id;
+  const listKabar = await donasi_funGetListKabarById({
+    page: 1,
+    donasiId: donasiId,
+  });
+
+  return (
+    <>
+      <Donasi_UiRekapKabar donasiId={donasiId} listKabar={listKabar as any} />
+    </>
+  );
+}
+
+export default Page;

src/app/dev/donasi/list_kabar/[id]/layout.tsx

@@ -1,16 +0,0 @@
-import { LayoutListKabarDonasi } from "@/app_modules/donasi";
-import React from "react";
-
-export default async function Layput({
-  children,
-  params
-}: {
-  children: React.ReactNode;
-  params: {id: string}
-}) {
-  return (
-    <>
-      <LayoutListKabarDonasi>{children}</LayoutListKabarDonasi>
-    </>
-  );
-}

src/app/dev/donasi/list_kabar/[id]/page.tsx

@@ -1,13 +0,0 @@
-import { ListKabarDonasi } from "@/app_modules/donasi";
-import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
-
-export default async function Page({params}: {params: {id: string}}) {
-const donasiId = params.id
-const listKabar = await donasi_funGetListKabarById({page: 1, donasiId : donasiId});
-
-  return (
-    <>
-      <ListKabarDonasi donasiId={donasiId} listKabar={listKabar as any} />
-    </>
-  );
-}

src/app/dev/donasi/notif_page/[id]/layout.tsx

@@ -1,8 +0,0 @@
-import { LayoutDonasi_NotifPage } from "@/app_modules/donasi";
-import React from "react";
-
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return<>
-    <LayoutDonasi_NotifPage>{children}</LayoutDonasi_NotifPage>
-    </>
-}

src/app/dev/donasi/notif_page/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/notif_page/[id]/page.tsx

@@ -1,14 +0,0 @@
-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)
-
-  return (
-    <>
-      <Donasi_NotifPage dataNotif={dataNotif as any} />
-    </>
-  );
-}

src/app/dev/donasi/page_pop_up/create/page.tsx

@@ -1,5 +0,0 @@
-import { PagePopUpCreateDonasi } from "@/app_modules/donasi";
-
-export default async function Page() {
-  return <PagePopUpCreateDonasi />;
-}

src/app/dev/donasi/proses_donasi/invoice/[id]/page.tsx

@@ -1,5 +1,4 @@
 import { Donasi_InvoiceProses } from "@/app_modules/donasi";
-import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
 import { Donasi_getOneInvoiceById } from "@/app_modules/donasi/fun/get/get_one_invoice_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {

src/app/lib/id-derectory.ts

@@ -14,8 +14,8 @@ const DIRECTORY_ID = {
 
   // Donasi
   donasi_image: "cm0yk1coh000f10nj597a99kv",
-  donasi_temporary_image: "cm2dvxo48007t10dpmmustxa2",
   donasi_cerita_image: "cm2dvy9bi007v10dpmatb5yiy",
+  donasi_kabar: "cm2dvxo48007t10dpmmustxa2",
   donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
 
   // Job

src/app/lib/router_hipmi/router_donasi.ts

@@ -22,24 +22,27 @@ export const RouterDonasi = {
   edit_donasi: "/dev/donasi/edit/edit_donasi/",
   edit_cerita_penggalang: "/dev/donasi/edit/edit_cerita/",
   edit_rekening: "/dev/donasi/edit/edit_rekening/",
+  edit_kabar: ({ id }: { id: string }) => `/dev/donasi/edit/kabar/${id}`,
 
   //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_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_main: "/dev/donasi/detail/main/",
+  detail_publish: "/dev/donasi/detail/publish/",
+  detail_review: "/dev/donasi/detail/review/",
+  detail_draft: "/dev/donasi/detail/draft/",
+  detail_reject: "/dev/donasi/detail/reject/",
+  detail_donasi_saya: "/dev/donasi/detail/donasi_saya/",
+
+  detail_kabar: "/dev/donasi/detail/kabar/",
   detail_notif: "/dev/donasi/detail/detail_notif/",
 
-
   //alur donasi
+  kabar: ({ id }: { id: string }) => `/dev/donasi/kabar/${id}`,
+  daftar_kabar: ({ id }: { id: string }) => `/dev/donasi/kabar/daftar/${id}`,
+  rekap_kabar: ({ id }: { id: string }) => `/dev/donasi/kabar/rekap/${id}`,
   donatur: "/dev/donasi/donatur/",
-  kabar: "/dev/donasi/kabar/",
   pencairan_dana: "/dev/donasi/pencairan_dana/",
   penggalang_dana: "/dev/donasi/penggalang_dana/",
   cerita_penggalang: "/dev/donasi/cerita_penggalang/",

src/app_modules/_global/component/waring_popup.ts

@@ -1,18 +0,0 @@
-import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global/notifikasi_peringatan";
-
-/**
- * @returns nilai maksimal untuk upload file di semua module
- */
-export let maksimalUploadFile = 2000000;
-export const ComponentGlobal_WarningMaxUpload = ({
-  text,
-  time,
-}: {
-  text?: string;
-  time?: number;
-}) => {
-  ComponentGlobal_NotifikasiPeringatan(
-    text ? text : "Maaf, Ukuran file terlalu besar, maximum 2mb",
-    time ? time : 3000
-  );
-};

src/app_modules/admin/donasi/detail/detail_reject.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import {
   AspectRatio,
   Button,
-  Divider,
   Group,
   Image,
   Modal,
@@ -15,19 +17,15 @@ import {
   Textarea,
   Title,
 } from "@mantine/core";
-import { useState } from "react";
-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";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { useState } from "react";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
 import ComponentAdminGlobal_BackButton from "../../_admin_global/back_button";
-import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
 import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
+import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
+import { AdminDonasi_getOneById } from "../fun/get/get_one_by_id";
+import { AdminDonasi_funUpdateCatatanReject } from "../fun/update/fun_update_catatan_reject";
+import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
 
 export default function AdminDonasi_DetailReject({
   dataReject,
@@ -44,7 +42,7 @@ export default function AdminDonasi_DetailReject({
           donasiId={data.id}
           setDonasi={setData}
         />
-          <CatatanReject catatan={data.catatan} />
+        <CatatanReject catatan={data.catatan} />
         <SimpleGrid
           cols={2}
           spacing="lg"
@@ -80,11 +78,11 @@ function ButtonOnHeader({
     await AdminDonasi_funUpdateCatatanReject(donasiId, report).then(
       async (res) => {
         if (res.status === 200) {
-          NotifBerhasil(res.message);
+          ComponentAdminGlobal_NotifikasiBerhasil(res.message);
           close();
           await AdminDonasi_getOneById(donasiId).then((res) => setDonasi(res));
         } else {
-          NotifGagal(res.message);
+          ComponentAdminGlobal_NotifikasiGagal(res.message);
         }
       }
     );
@@ -99,7 +97,6 @@ function ButtonOnHeader({
             Tambah catatan
           </Button>
         </Group>
-
       </Stack>
 
       <Modal
@@ -196,7 +193,7 @@ function CatatanReject({ catatan }: { catatan: string }) {
     <>
       <Paper p={"md"} bg={"gray.1"}>
         <Stack>
-          <Title order={5} >Alasan Penolakan :</Title>
+          <Title order={5}>Alasan Penolakan :</Title>
           <Text>{catatan}</Text>
         </Stack>
       </Paper>

src/app_modules/admin/donasi/detail/publish/proses_transaksi.tsx

@@ -23,12 +23,12 @@ import moment from "moment";
 import { IconQuestionMark } from "@tabler/icons-react";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import { AdminDonasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
-import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
-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_OLD } from "@/app/lib/router_hipmi/router_admin";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
 
 export default function AdminDonasi_ProsesTransaksi({
   listProses,
@@ -47,7 +47,7 @@ export default function AdminDonasi_ProsesTransaksi({
     await AdminDonasi_funUpdateStatusInvoice(invoice.id, "1").then(
       async (res) => {
         if (res.status === 200) {
-          NotifBerhasil(res.message);
+          ComponentAdminGlobal_NotifikasiBerhasil(res.message);
           await AdminDonasi_funUpdateProgresDanTerkumpul(
             invoice.Donasi.id,
             totalTerkumpul
@@ -59,11 +59,11 @@ export default function AdminDonasi_ProsesTransaksi({
                 setInvoice(res);
               });
             } else {
-              NotifGagal(res.message);
+              ComponentAdminGlobal_NotifikasiGagal(res.message);
             }
           });
         } else {
-          NotifGagal(res.message);
+          ComponentAdminGlobal_NotifikasiGagal(res.message);
         }
       }
     );

src/app_modules/donasi/_ui/edit/ui_edit_kabar.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { Donasi_ViewEditKabar } from "../../_view";
+
+export function Donasi_UiEditKabar({ dataKabar }: { dataKabar: any }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Kabar" />}
+      >
+        <Donasi_ViewEditKabar dataKabar={dataKabar as any} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/donasi/_ui/index.ts

@@ -0,0 +1,7 @@
+import { Donasi_UiEditKabar } from "./edit/ui_edit_kabar";
+import { Donasi_UiDaftarKabar } from "./kabar/ui_daftar_kabar";
+import { Donasi_UiRekapKabar } from "./kabar/ui_rekap_kabar";
+
+export { Donasi_UiDaftarKabar };
+export { Donasi_UiEditKabar };
+export { Donasi_UiRekapKabar };

src/app_modules/donasi/_ui/kabar/ui_daftar_kabar.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import React from "react";
+import { Donasi_ViewDaftarKabar } from "../../_view";
+
+export function Donasi_UiDaftarKabar({
+  dataDonasi,
+  donasiId,
+}: {
+  dataDonasi: string;
+  donasiId: string;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Daftar Kabar" />}
+      >
+        <Donasi_ViewDaftarKabar
+          dataDonasi={dataDonasi as any}
+          donasiId={donasiId}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/donasi/_ui/kabar/ui_rekap_kabar.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon } from "@mantine/core";
+import { IconCirclePlus, IconDotsVertical } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { Donasi_ViewRekapKabar } from "../../_view";
+
+export function Donasi_UiRekapKabar({
+  listKabar,
+  donasiId,
+}: {
+  listKabar: any[];
+  donasiId: string;
+}) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Tambah Kabar",
+      icon: <IconCirclePlus />,
+      path: RouterDonasi.create_kabar + donasiId,
+    },
+  ];
+
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Daftar Kabar"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  setOpenDrawer(true);
+                }}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        <Donasi_ViewRekapKabar donasiId={donasiId} listKabar={listKabar} />
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
+    </>
+  );
+}

src/app_modules/donasi/_view/edit/view_edit_kabar.tsx

@@ -0,0 +1,236 @@
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_InputCountDown,
+  ComponentGlobal_LoadImageCustom,
+} from "@/app_modules/_global/component";
+import {
+  AspectRatio,
+  Button,
+  FileButton,
+  Group,
+  Image,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { DIRECTORY_ID } from "@/app/lib";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import { donasi_funUpdateKabar } from "../../fun";
+
+export function Donasi_ViewEditKabar({
+  dataKabar,
+}: {
+  dataKabar: MODEL_DONASI_KABAR;
+}) {
+  const router = useRouter();
+  const [data, setData] = useState(dataKabar);
+  const [file, setFile] = useState<File | null>(null);
+  const [img, setImg] = useState<any | null>();
+  const [isLoading, setLoading] = useState(false);
+
+  async function onUpdate() {
+    if (data.title === "" || data.deskripsi === "") {
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi data");
+    }
+
+    try {
+      setLoading(true);
+      if (file !== null) {
+        const uploadImage = await funGlobal_UploadToStorage({
+          file: file as File,
+          dirId: DIRECTORY_ID.donasi_kabar,
+        });
+
+        if (!uploadImage.success) {
+          setLoading(false);
+          return ComponentGlobal_NotifikasiPeringatan(
+            "Gagal upload file gambar"
+          );
+        }
+
+        const res = await donasi_funUpdateKabar({
+          data: data,
+          fileId: uploadImage.data.id,
+        });
+
+        if (res.status === 200) {
+          setLoading(false);
+
+          const deleteImage = await funGlobal_DeleteFileById({
+            fileId: data.imageId,
+          });
+          if (!deleteImage.success) {
+            setLoading(false);
+            ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+          }
+
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          setLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      } else {
+        const res = await donasi_funUpdateKabar({
+          data: data,
+        });
+
+        if (res.status === 200) {
+          setLoading(false);
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+        } else {
+          setLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <>
+      <Stack px={"lg"} pb={"lg"}>
+        <ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
+
+        <TextInput
+          maxLength={100}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          label="Judul"
+          withAsterisk
+          placeholder="Masukan judul kabar"
+          value={data.title}
+          onChange={(val) => {
+            setData({
+              ...data,
+              title: _.startCase(val.target.value),
+            });
+          }}
+        />
+        <Textarea
+          maxLength={500}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          label="Deskripsi"
+          withAsterisk
+          placeholder="Masukan deskripsi kabar"
+          autosize
+          maxRows={4}
+          minRows={2}
+          value={data.deskripsi}
+          onChange={(val) => {
+            setData({
+              ...data,
+              deskripsi: val.target.value,
+            });
+          }}
+        />
+        <ComponentGlobal_InputCountDown
+          lengthInput={data.deskripsi.length}
+          maxInput={500}
+        />
+
+        <Stack spacing={5}>
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250 }}
+                  alt="Foto"
+                  height={250}
+                  src={img}
+                />
+              </AspectRatio>
+            ) : data.imageId === null ? (
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="white" />
+                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                  Upload Gambar
+                </Text>
+              </Stack>
+            ) : (
+              <Stack justify="center" align="center" h={"100%"} p={"sm"}>
+                <ComponentGlobal_LoadImageCustom
+                  fileId={data.imageId}
+                  height={200}
+                />
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
+          {/* Upload Foto */}
+          <Group position="center">
+            <FileButton
+              onChange={async (files: any) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  setImg(buffer);
+                  setFile(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  {...props}
+                  leftIcon={<IconCamera color="black" />}
+                  radius={50}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload Gambar
+                </Button>
+              )}
+            </FileButton>
+          </Group>
+        </Stack>
+
+        <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={_.values(data).includes("") ? true : false}
+          radius={"xl"}
+          mt={"lg"}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          loading={isLoading}
+          loaderPosition="center"
+          onClick={() => onUpdate()}
+        >
+          Simpan
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/donasi/_view/index.ts

@@ -0,0 +1,7 @@
+import { Donasi_ViewEditKabar } from "./edit/view_edit_kabar";
+import { Donasi_ViewDaftarKabar } from "./kabar/view_daftar_kabar";
+import { Donasi_ViewRekapKabar } from "./kabar/view_rekap_kabar";
+
+export { Donasi_ViewDaftarKabar };
+export { Donasi_ViewEditKabar };
+export { Donasi_ViewRekapKabar };

src/app_modules/donasi/_view/kabar/view_daftar_kabar.tsx

@@ -0,0 +1,52 @@
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentDonasi_ListKabar from "../../component/card_view/ui_card_kabar";
+import { donasi_funGetListKabarById } from "../../fun/get/get_list_kabar";
+
+export function Donasi_ViewDaftarKabar({ dataDonasi ,donasiId}: { dataDonasi: any[], donasiId: string }) {
+  const [data, setData] = useState(dataDonasi);
+  const [activePage, setActivePage] = useState(1);
+
+  return (
+    <>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetListKabarById({
+                page: activePage + 1,
+                donasiId: donasiId,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_ListKabar
+                kabar={item}
+                route={RouterDonasi.detail_kabar}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
+    </>
+  );
+}

src/app_modules/donasi/_view/kabar/view_rekap_kabar.tsx

@@ -1,22 +1,18 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { Box, Button, Center, Stack } from "@mantine/core";
-import { IconCirclePlus } from "@tabler/icons-react";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center, Stack } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_ListKabar from "../../component/card_view/ui_card_kabar";
-import { MODEL_DONASI_KABAR } from "../../model/interface";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { ComponentDonasi_CardDonatur } from "../../component/card_view/ui_card_donatur";
-import { donasi_funGetListDonaturById } from "../../fun/get/get_list_donatur";
 import { donasi_funGetListKabarById } from "../../fun/get/get_list_kabar";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
 
-export default function ListKabarDonasi({
+export function Donasi_ViewRekapKabar({
   donasiId,
   listKabar,
 }: {
@@ -31,22 +27,6 @@ export default function ListKabarDonasi({
   return (
     <>
       <Stack>
-        <Button
-          loaderPosition="center"
-          loading={isLoading ? true : false}
-          leftIcon={<IconCirclePlus />}
-          radius={"xl"}
-          onClick={() => {
-            setIsLoading(true);
-            router.push(RouterDonasi.create_kabar + `${donasiId}`);
-          }}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-        >
-          Tambah Kabar
-        </Button>
-
         {_.isEmpty(data) ? (
           <ComponentGlobal_IsEmptyData />
         ) : (

src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx

@@ -0,0 +1,88 @@
+import { Button } from "@mantine/core";
+import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
+import { useState } from "react";
+import { UIGlobal_Modal } from "@/app_modules/_global/ui";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiPeringatan,
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+} from "@/app_modules/_global/notif_global";
+
+import { useAtom } from "jotai";
+import { gs_donasi_tabs_posting } from "../../global_state";
+import { useRouter } from "next/navigation";
+
+export function Donasi_ComponentButtonDeleteDonasiById({
+  donasiId,
+  imageCeritaId,
+  imageId,
+}: {
+  donasiId: string;
+  imageCeritaId: string;
+  imageId: string;
+}) {
+  const router = useRouter();
+  const [openModal, setOpenModal] = useState(false);
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+
+  async function onDelete() {
+    const del = await Donasi_funDeleteDonasiById(donasiId);
+    if (del.status === 200) {
+      const deleteImageDonasi = await funGlobal_DeleteFileById({
+        fileId: imageId as any,
+      });
+
+      if (!deleteImageDonasi.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      }
+
+      const deleteImageCerita = await funGlobal_DeleteFileById({
+        fileId: imageCeritaId as any,
+      });
+
+      if (!deleteImageCerita.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      }
+
+      router.push(RouterDonasi.main_galang_dana);
+      setTabsPostingDonasi("Draft");
+      ComponentGlobal_NotifikasiBerhasil(del.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(del.message);
+    }
+  }
+
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        color="red"
+        onClick={() => {
+          setOpenModal(true);
+        }}
+      >
+        Hapus Donasi
+      </Button>
+
+      <UIGlobal_Modal
+        title={"Anda yakin ingin menghapus donasi ini ?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button radius={"xl"} color="red" onClick={() => onDelete()}>
+            Hapus
+          </Button>
+        }
+      />
+    </>
+  );
+}

src/app_modules/donasi/component/card_view/card_invoice.tsx

@@ -1,18 +1,18 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_LoadImageCustom,
+} from "@/app_modules/_global/component";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
-  AspectRatio,
   Badge,
   Card,
   Grid,
   Group,
-  Image,
-  Paper,
   Progress,
   Stack,
-  Text,
+  Text
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -88,15 +88,10 @@ export function ComponentDonasi_CardInvoice({
               </Stack>
             </Grid.Col>
             <Grid.Col span={7}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt="Foto"
-                    src={RouterDonasi.api_gambar + `${data.Donasi.imagesId}`}
-                    radius={"md"}
-                  />
-                </Paper>
-              </AspectRatio>
+              <ComponentGlobal_LoadImageCustom
+                height={150}
+                fileId={data.Donasi.imageId}
+              />
             </Grid.Col>
           </Grid>
           {/* {width > 575 ? "" : <Divider />} */}

src/app_modules/donasi/component/card_view/ui_card_kabar.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { Paper, Stack, Text, Title } from "@mantine/core";
-import moment from "moment";
+import { Stack, Text, Title } from "@mantine/core";
 
-import { MODEL_DONASI_KABAR } from "../../model/interface";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import { useRouter } from "next/navigation";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { useState } from "react";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
 
 export default function ComponentDonasi_ListKabar({
   kabar,
@@ -16,26 +18,25 @@ export default function ComponentDonasi_ListKabar({
   route: string;
 }) {
   const router = useRouter();
+  const [visible, setVisible] = useState(false);
   return (
     <>
-      <Paper
-        style={{
-          backgroundColor: AccentColor.blue,
-          border: `2px solid ${AccentColor.darkblue}`,
-          padding: "15px",
-          cursor: "pointer",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "10px",
+      <ComponentGlobal_CardStyles
+        onClickHandler={() => {
+          router.push(route + `${kabar.id}`);
+          setVisible(true);
         }}
-        onClick={() => router.push(route + `${kabar.id}`)}
       >
         <Stack>
-          <Text fz={"xs"}>{moment(kabar.createdAt).format("ll")}</Text>
-
+          <Text fz={"xs"}>
+            {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+              kabar.createdAt
+            )}
+          </Text>
           <Title order={5}>{kabar.title}</Title>
         </Stack>
-      </Paper>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx

@@ -27,13 +27,13 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
 import { MODEL_DONASI } from "../../model/interface";
-import { NotifPeringatan } from "../notifikasi/notif_peringatan";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
 import {
   ComponentGlobal_CardStyles,
   ComponentGlobal_LoadImageLandscape,
 } from "@/app_modules/_global/component";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 export function ComponentDonasi_DetailDataMain({
   donasi,
@@ -126,7 +126,9 @@ export function ComponentDonasi_DetailDataMain({
               span={"auto"}
               onClick={() => {
                 setLoadingKabar(true);
-                router.push(RouterDonasi.kabar + `${donasi?.id}`);
+                router.push(RouterDonasi.daftar_kabar({ id: donasi.id }), {
+                  scroll: false,
+                });
               }}
             >
               <Stack spacing={"sm"} align="center">
@@ -187,7 +189,7 @@ async function onPencairanDana(
   }
 
   if (!cek) {
-    return NotifPeringatan("Halaman khusus donatur");
+    return ComponentGlobal_NotifikasiPeringatan("Halaman khusus donatur");
   } else {
     setLoadingPencairan(true);
     router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);

src/app_modules/donasi/component/index.ts

@@ -0,0 +1,3 @@
+import { Donasi_ComponentButtonDeleteDonasiById } from "./button/comp_button_delete_donasi_by_id";
+
+export { Donasi_ComponentButtonDeleteDonasiById };

src/app_modules/donasi/component/notifikasi/notif_berhasil.tsx

@@ -1,31 +0,0 @@
-import { Center, Text } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
-import { IconAlertTriangle, IconChecklist, IconCircleCheck } from "@tabler/icons-react";
-
-/**
- * 
- * @param text | masukan text untuk peringatan
- * @type string
- * @returns notifikasi peringatan
- */
-export async function NotifBerhasil(text: string) {
-  return notifications.show({
-    message: (
-      <Center>
-        <Text fw={"bold"}>{text}</Text>
-      </Center>
-    ),
-    color: "green",
-    radius: "md",
-    autoClose: 1000,
-    icon: <IconCircleCheck color="white" />,
-    withCloseButton: false,
-
-    styles: (theme) => ({
-      description: { color: theme.white },
-      root: {
-        backgroundColor: theme.colors.green[7],
-      },
-    }),
-  });
-}

src/app_modules/donasi/component/notifikasi/notif_gagal.tsx

@@ -1,31 +0,0 @@
-import { Center, Text } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
-import { IconAlertTriangle } from "@tabler/icons-react";
-
-/**
- * 
- * @param text | masukan text untuk peringatan
- * @type string
- * @returns notifikasi peringatan
- */
-export async function NotifGagal(text: string) {
-  return notifications.show({
-    message: (
-      <Center>
-        <Text fw={"bold"}>{text}</Text>
-      </Center>
-    ),
-    color: "red",
-    radius: "md",
-    autoClose: 1000,
-    icon: <IconAlertTriangle color="white" />,
-    withCloseButton: false,
-
-    styles: (theme) => ({
-      description: { color: theme.white },
-      root: {
-        backgroundColor: theme.colors.red[7],
-      },
-    }),
-  });
-}

src/app_modules/donasi/component/notifikasi/notif_peringatan.tsx

@@ -1,31 +0,0 @@
-import { Center, Text } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
-import { IconAlertTriangle } from "@tabler/icons-react";
-
-/**
- * 
- * @param text | masukan text untuk peringatan
- * @type string
- * @returns notifikasi peringatan
- */
-export async function NotifPeringatan(text: string) {
-  return notifications.show({
-    message: (
-      <Center>
-        <Text fw={"bold"}>{text}</Text>
-      </Center>
-    ),
-    color: "yellow",
-    radius: "md",
-    autoClose: 1000,
-    icon: <IconAlertTriangle color="white" />,
-    withCloseButton: false,
-
-    styles: (theme) => ({
-      description: { color: theme.white },
-      root: {
-        backgroundColor: theme.colors.yellow[7],
-      },
-    }),
-  });
-}

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -7,8 +7,7 @@ import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component"
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
+  funGlobal_UploadToStorage
 } from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";

src/app_modules/donasi/create/create_donasi.tsx

@@ -55,7 +55,6 @@ export default function CreateDonasi({
   );
 
   async function onCreate() {
-    setLoading(true);
     const body = {
       donasiMaster_KategoriId: data.kategoriId,
       donasiMaster_DurasiId: data.durasiId,
@@ -67,6 +66,8 @@ export default function CreateDonasi({
       return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
 
     try {
+      setLoading(true);
+
       const uploadImage = await funGlobal_UploadToStorage({
         file: file as File,
         dirId: DIRECTORY_ID.donasi_image,
@@ -188,9 +189,9 @@ export default function CreateDonasi({
         <Stack>
           <ComponentGlobal_BoxUploadImage>
             {img ? (
-              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
                 <Image
-                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                  style={{ maxHeight: 250 }}
                   alt="Foto"
                   height={250}
                   src={img}

src/app_modules/donasi/create/create_kabar/index.tsx

@@ -1,48 +1,110 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { notifikasiToUser_CreateKabarDonasi } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_kabar_donasi";
 import {
   AspectRatio,
   Button,
-  Center,
   FileButton,
+  Group,
   Image,
-  Paper,
   Stack,
   Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Donasi_funCreateKabar } from "../../fun/create/fun_create_kabar";
-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";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { notifikasiToUser_CreateKabarDonasi } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_kabar_donasi";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
 
 export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
-  const [imageKabar, setImageKabar] = useState<any | null>();
+  const [img, setImg] = useState<any | null>();
   const [kabar, setKabar] = useState({
     judul: "",
     deskripsi: "",
   });
+
+  const [isLoading, setLoading] = useState(false);
+
+  async function onSave() {
+    const body = {
+      donasiId: donasiId,
+      title: kabar.judul,
+      deskripsi: kabar.deskripsi,
+    };
+
+    if (_.values(body).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+
+    try {
+      setLoading(true);
+      if (file !== null) {
+        const uploadImage = await funGlobal_UploadToStorage({
+          file: file as File,
+          dirId: DIRECTORY_ID.donasi_kabar,
+        });
+
+        if (!uploadImage.success) {
+          setLoading(false);
+          return ComponentGlobal_NotifikasiPeringatan(
+            "Gagal upload file gambar"
+          );
+        }
+
+        const res = await Donasi_funCreateKabar({
+          data: body as any,
+          fileId: uploadImage.data.id,
+        });
+
+        if (res.status === 200) {
+          await notifikasiToUser_CreateKabarDonasi({
+            donasiId: donasiId,
+            kabarId: res.kabarId as any,
+          });
+
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+          setLoading(false);
+        }
+      } else {
+        const res = await Donasi_funCreateKabar({
+          data: body as any,
+        });
+
+        if (res.status === 200) {
+          await notifikasiToUser_CreateKabarDonasi({
+            donasiId: donasiId,
+            kabarId: res.kabarId as any,
+          });
+
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+          setLoading(false);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   return (
     <>
       <Stack px={"lg"} pb={"lg"}>
@@ -76,6 +138,8 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           withAsterisk
           placeholder="Masukan deskripsi kabar"
           autosize
+          maxRows={4}
+          minRows={2}
           onChange={(val) => {
             setKabar({
               ...kabar,
@@ -88,41 +152,36 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           maxInput={500}
         />
 
-        <Stack>
-          {imageKabar ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
+        <Stack spacing={5}>
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
                 <Image
+                  style={{ maxHeight: 250 }}
                   alt="Foto"
-                  src={imageKabar ? imageKabar : "/aset/no-img.png"}
-                  maw={300}
+                  height={250}
+                  src={img}
                 />
-              </Paper>
-            </AspectRatio>
-          ) : (
-            <Center>
-              <Text fs={"italic"} fz={10} c={"white"}>
-                Upload gambar kabar !
-              </Text>
-            </Center>
-          )}
-          <Center>
+              </AspectRatio>
+            ) : (
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="white" />
+                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                  Upload Gambar
+                </Text>
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
+          {/* Upload Foto */}
+          <Group position="center">
             <FileButton
-              onChange={async (files: any | null) => {
+              onChange={async (files: any) => {
                 try {
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  // console.log(buffer, "ini buffer");
-                  // console.log(files, " ini file");
-                  setImageKabar(buffer);
+                  setImg(buffer);
                   setFile(files);
                 } catch (error) {
                   console.log(error);
@@ -133,18 +192,19 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
               {(props) => (
                 <Button
                   {...props}
-                  radius={"xl"}
-                  leftIcon={<IconCamera />}
+                  leftIcon={<IconCamera color="black" />}
+                  radius={50}
                   bg={MainColor.yellow}
                   color="yellow"
                   c={"black"}
                 >
-                  Upload
+                  Upload Gambar
                 </Button>
               )}
             </FileButton>
-          </Center>
+          </Group>
         </Stack>
+
         <Button
           style={{
             transition: "0.5s",
@@ -155,7 +215,9 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           bg={MainColor.yellow}
           color="yellow"
           c={"black"}
-          onClick={() => onSave(router, donasiId, kabar, file as any)}
+          loading={isLoading}
+          loaderPosition="center"
+          onClick={() => onSave()}
         >
           Simpan
         </Button>
@@ -168,36 +230,3 @@ interface Model_Kabar {
   judul: string;
   deskripsi: string;
 }
-
-async function onSave(
-  router: AppRouterInstance,
-  donasiId: string,
-  kabar: Model_Kabar,
-  file: FormData
-) {
-  const body = {
-    donasiId: donasiId,
-    title: kabar.judul,
-    deskripsi: kabar.deskripsi,
-  };
-
-  if (_.values(body).includes(""))
-    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-  // if (!file) return NotifPeringatan("Lengkapi Gambar");
-
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  const res = await Donasi_funCreateKabar(body as any, gambar);
-  if (res.status === 200) {
-    await notifikasiToUser_CreateKabarDonasi({
-      donasiId: donasiId,
-      kabarId: res.kabarId as any,
-    });
-
-    ComponentGlobal_NotifikasiBerhasil(res.message);
-    router.back();
-  } else {
-    ComponentGlobal_NotifikasiGagal(res.message);
-  }
-}

src/app_modules/donasi/create/index.ts

@@ -0,0 +1,3 @@
+import LayoutCreateCeritaDonasi from "./layout_cerita_penggalang";
+
+export { LayoutCreateCeritaDonasi };

src/app_modules/donasi/create/layout.tsx

@@ -12,9 +12,7 @@ export default function LayoutCreateDonasi({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" hideButtonLeft />
-        }
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/donasi/create/layout_cerita_penggalang.tsx

@@ -4,15 +4,18 @@ import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_ta
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
 
-export default function LayoutListKabarDonasi({
+export default function LayoutCreateCeritaDonasi({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate 
-      header={<UIGlobal_LayoutHeaderTamplate title="Daftar Kabar" />}>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Tambah Cerita" hideButtonLeft />
+        }
+      >
         {children}
       </UIGlobal_LayoutTamplate>
     </>

src/app_modules/donasi/detail/deail_notif/index.tsx

@@ -1,34 +0,0 @@
-"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>
-
-  </>;
-}

src/app_modules/donasi/detail/deail_notif/layout.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import { Button, Center, Footer } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import React from "react";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-
-export default function LayoutDonasi_DetailNotif({
-  children,
-  donasiId,
-}: {
-  children: React.ReactNode;
-  donasiId: string;
-}) {
-  const router = useRouter();
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        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}
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}

src/app_modules/donasi/detail/detail_draft/index.tsx

@@ -1,44 +1,39 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { Button, Stack } from "@mantine/core";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Group, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import mqtt_client from "@/util/mqtt_client";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
-import { useState } from "react";
+import { Donasi_ComponentButtonDeleteDonasiById } from "../../component";
 
 export default function DetailDraftDonasi({
   dataDonasi,
 }: {
   dataDonasi: MODEL_DONASI;
 }) {
-  // const [data, setData] = useState(dataDonasi);
-
-  // useShallowEffect(() => {
-  //   loadData({ id: dataDonasi.id });
-  // }, [dataDonasi.id]);
-
-  // async function loadData({ id }: { id: string }) {
-  //   const loadData = await Donasi_getOneById(id);
-  //   setData(loadData as any);
-  // }
-
   return (
     <>
       <Stack spacing={"xl"} py={"md"}>
         <ComponentDonasi_DetailDataGalangDana donasi={dataDonasi} />
         <ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
-        <ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
+        <Group position="apart" grow mt={"lg"}>
+          <ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
+          <Donasi_ComponentButtonDeleteDonasiById
+            donasiId={dataDonasi.id}
+            imageCeritaId={dataDonasi.CeritaDonasi.imageId}
+            imageId={dataDonasi.imageId}
+          />
+        </Group>
       </Stack>
     </>
   );
@@ -93,7 +88,7 @@ function ButtonAjukanPenggalangan({
         color="orange"
         onClick={() => onCLick()}
       >
-        Ajukan Penggalangan Dana
+        Ajukan Kembali
       </Button>
     </>
   );

src/app_modules/donasi/detail/detail_kabar/index.tsx

@@ -1,56 +1,42 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Paper,
-  Stack,
-  Group,
-  Avatar,
-  Title,
-  Text,
-  AspectRatio,
-  Image,
-  Divider,
-} from "@mantine/core";
-import moment from "moment";
-import { MODEL_DONASI_KABAR } from "../../model/interface";
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
 
-export default function DetailKabarDonasi({dataDonasi}: {dataDonasi: MODEL_DONASI_KABAR}) {
-  const [kabar, setKabar] = useState(dataDonasi)
+export default function DetailKabarDonasi({
+  dataDonasi,
+}: {
+  dataDonasi: MODEL_DONASI_KABAR;
+}) {
+  const [kabar, setKabar] = useState(dataDonasi);
   return (
     <>
-      <Stack
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "20px",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "15px",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         <Stack>
           <Group position="right">
-            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+            <Text>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                kabar.createdAt
+              )}
+            </Text>
           </Group>
-          <Title align="center" order={4}>{kabar.title}</Title>
-          {kabar.imagesId === null ? (
+
+          {kabar.imageId === null ? (
             ""
           ) : (
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
-                <Image
-                  alt="Foro"
-                  src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
-                />
-              </Paper>
-            </AspectRatio>
+            <ComponentGlobal_LoadImageLandscape fileId={kabar.imageId} />
           )}
+          <Title align="center" order={4}>
+            {kabar.title}
+          </Title>
           <Text>{kabar.deskripsi}</Text>
         </Stack>
-      </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/index.tsx

@@ -1,63 +1,42 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { ComponentDonasi_CardDonatur } from "@/app_modules/donasi/component/card_view/ui_card_donatur";
-import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/card_view/ui_card_kabar";
-import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
-import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
 import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
-import { Box, Center } from "@mantine/core";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
 
 export default function KabarDonasi({
-  listKabar,
-  donasiId,
+  dataDonasi,
 }: {
-  listKabar: MODEL_DONASI_KABAR[];
-  donasiId: string;
+  dataDonasi: MODEL_DONASI_KABAR;
 }) {
-  const [data, setData] = useState(listKabar);
-  const [activePage, setActivePage] = useState(1);
-
+  const [kabar, setKabar] = useState(dataDonasi);
   return (
     <>
-      {_.isEmpty(data) ? (
-        <ComponentGlobal_IsEmptyData />
-      ) : (
-        <Box>
-          <ScrollOnly
-            height="92vh"
-            renderLoading={() => (
-              <Center>
-                <ComponentGlobal_Loader size={25} />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await donasi_funGetListKabarById({
-                page: activePage + 1,
-                donasiId: donasiId,
-              });
+      <ComponentGlobal_CardStyles>
+        <Stack>
+          <Group position="right">
+            <Text>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                kabar.createdAt
+              )}
+            </Text>
+          </Group>
 
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentDonasi_ListKabar
-                kabar={item}
-                route={RouterDonasi.detail_kabar}
-              />
-            )}
-          </ScrollOnly>
-        </Box>
-      )}
+          {kabar.imageId === null ? (
+            ""
+          ) : (
+            <ComponentGlobal_LoadImageLandscape fileId={kabar.imageId} />
+          )}
+          <Title align="center" order={4}>
+            {kabar.title}
+          </Title>
+          <Text>{kabar.deskripsi}</Text>
+        </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/layout.tsx

@@ -12,7 +12,7 @@ export default function LayoutKabarDonasi({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Kabar Terbaru" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Kabar" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/donasi/detail/detail_main/layout.tsx

@@ -2,24 +2,64 @@
 
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import React from "react";
+import React, { useState } from "react";
 import ButtonDonasi from "../../component/footer_button_donasi";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { IconDotsVertical, IconMessageShare } from "@tabler/icons-react";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
+import { ActionIcon } from "@mantine/core";
 
 export default function LayoutDetailMainDonasi({
   children,
   donasiId,
+  authorId,
+  userLoginId,
 }: {
   children: React.ReactNode;
   donasiId: string;
+  authorId: string;
+  userLoginId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Rekap Kabar",
+      icon: <IconMessageShare />,
+      path: RouterDonasi.rekap_kabar({ id: donasiId }),
+    },
+  ];
+
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Donasi"
+            customButtonRight={
+              userLoginId !== authorId ? (
+                ""
+              ) : (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <IconDotsVertical color="white" />
+                </ActionIcon>
+              )
+            }
+          />
+        }
         footer={<ButtonDonasi donasiId={donasiId} />}
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
 }

src/app_modules/donasi/detail/detail_publish/layout.tsx

@@ -1,18 +1,12 @@
 "use client";
 
-import { ActionIcon, AppShell } from "@mantine/core";
-import React, { useState } from "react";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-import {
-  IconDotsVertical,
-  IconEdit,
-  IconMessageShare,
-} from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon } from "@mantine/core";
+import { IconDotsVertical, IconMessageShare } from "@tabler/icons-react";
+import React, { useState } from "react";
 
 export default function LayoutDetailPublishDonasi({
   children,
@@ -26,9 +20,9 @@ export default function LayoutDetailPublishDonasi({
   const listPage = [
     {
       id: "1",
-      name: "Daftar Kabar",
+      name: "Rekap Kabar",
       icon: <IconMessageShare />,
-      path: RouterDonasi.list_kabar + donasiId,
+      path: RouterDonasi.rekap_kabar({ id: donasiId }),
     },
   ];
 
@@ -38,8 +32,6 @@ export default function LayoutDetailPublishDonasi({
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Publish"
-            // icon={<IconMessageShare />}
-            // route2={RouterDonasi.list_kabar + `${donasiId}`}
             customButtonRight={
               <ActionIcon
                 variant="transparent"

src/app_modules/donasi/detail/detail_reject/index.tsx

@@ -1,66 +1,58 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Button,
-  Group,
-  Modal,
-  Paper,
-  Spoiler,
-  Stack,
-  Title,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import { Button, Group, Paper, Spoiler, Stack, Title } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
 
 export default function DetailRejectDonasi({
   dataReject,
+  fileIdImageCerita,
 }: {
   dataReject: MODEL_DONASI;
+  fileIdImageCerita: string;
 }) {
-  const [donasi, setDonasi] = useState(dataReject);
+  const [data, setData] = useState(dataReject);
   return (
     <>
       <Stack spacing={"xl"} py={"md"}>
-        <ComponentGlobal_BoxInformation isReport informasi={donasi.catatan} />
-        <ComponentDonasi_DetailDataGalangDana donasi={donasi} />
-        <ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
-        <ButtonAction donasiId={donasi.id} />
+        <ComponentGlobal_BoxInformation isReport informasi={data.catatan} />
+        <ComponentDonasi_DetailDataGalangDana donasi={data} />
+        <ComponentDonasi_CeritaPenggalangMain donasi={data} />
+        <ButtonAction
+          donasiId={data.id}
+          fileIdImageCerita={fileIdImageCerita}
+          imageId={data.imageId}
+        />
       </Stack>
     </>
   );
 }
 
-function AlasanPenolakan({ catatan }: { catatan: string }) {
-  return (
-    <>
-      <Paper bg={"blue.1"} p={"sm"}>
-        <Title order={5}>Alasan penolakan</Title>
-        <Spoiler
-          maxHeight={50}
-          hideLabel="Sembunyikan"
-          showLabel="Selengkapnya"
-        >
-          {catatan}
-        </Spoiler>
-      </Paper>
-    </>
-  );
-}
-
-function ButtonAction({ donasiId }: { donasiId: string }) {
+function ButtonAction({
+  donasiId,
+  fileIdImageCerita,
+  imageId,
+}: {
+  donasiId: string;
+  fileIdImageCerita: string;
+  imageId: string;
+}) {
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
@@ -71,24 +63,39 @@ function ButtonAction({ donasiId }: { donasiId: string }) {
   async function onCLick() {
     await Donasi_funGantiStatus(donasiId, "3").then((res) => {
       if (res.status === 200) {
-        NotifBerhasil(res.message);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
         router.push(RouterDonasi.main_galang_dana);
       } else {
-        NotifGagal(res.message);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
     setTabsPostingDonasi("Draft");
   }
   async function onDelete() {
-    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);
+    const del = await Donasi_funDeleteDonasiById(donasiId);
+    if (del.status === 200) {
+      const deleteImageDonasi = await funGlobal_DeleteFileById({
+        fileId: imageId as any,
+      });
+
+      if (!deleteImageDonasi.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
       }
-    });
+
+      const deleteImageCerita = await funGlobal_DeleteFileById({
+        fileId: fileIdImageCerita as any,
+      });
+
+      if (!deleteImageCerita.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      }
+
+      router.push(RouterDonasi.main_galang_dana);
+      setTabsPostingDonasi("Reject");
+      ComponentGlobal_NotifikasiBerhasil(del.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(del.message);
+    }
   }
   return (
     <>

src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx

@@ -1,38 +1,35 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_LoadImageCustom,
+} from "@/app_modules/_global/component";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
   AspectRatio,
   Button,
   Center,
   FileButton,
   Image,
-  Paper,
   Stack,
   Textarea,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
-import { useAtom } from "jotai";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { gs_donasi_tabs_posting } from "../../global_state";
-import { MODEL_CERITA_DONASI } from "../../model/interface";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import _ from "lodash";
 import { Donasi_funUpdateCerita } from "../../fun/update/fun_update_cerita_donasi";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import {
-  ComponentGlobal_WarningMaxUpload,
-  maksimalUploadFile,
-} from "@/app_modules/_global/component/waring_popup";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { MODEL_CERITA_DONASI } from "../../model/interface";
 
 export default function EditCeritaPenggalangDonasi({
   dataCerita,
@@ -41,27 +38,75 @@ export default function EditCeritaPenggalangDonasi({
 }) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
-
-  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
-    gs_donasi_tabs_posting
-  );
-  const [value, setValue] = useState(dataCerita);
+  const [data, setData] = useState(dataCerita);
   const [file, setFile] = useState<File | null>(null);
   const [updateImage, setUpdateImage] = useState<any | null>();
 
+  async function onUpdate() {
+    setLoading(true);
+
+    const body = {
+      id: data.id,
+      pembukaan: data.pembukaan,
+      cerita: data.cerita,
+    };
+
+    if (_.values(body).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
+
+    try {
+      if (file !== null) {
+        const uploadImage = await funGlobal_UploadToStorage({
+          file: file as File,
+          dirId: DIRECTORY_ID.donasi_cerita_image,
+        });
+        if (!uploadImage.success) {
+          setLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+        }
+
+        const deleteImage = await funGlobal_DeleteFileById({
+          fileId: data.imageId,
+        });
+        if (!deleteImage.success) {
+          setLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+        }
+
+        const res = await Donasi_funUpdateCerita({
+          data: body as any,
+          fileId: uploadImage.data.id,
+        });
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+          setLoading(false);
+        }
+      } else {
+        const res = await Donasi_funUpdateCerita({
+          data: body as any,
+        });
+
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+          setLoading(false);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   return (
     <>
-      {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
-      <Stack
-        spacing={"md"}
-        style={{
-          padding: "15px",
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          color: "white",
-        }}
-      >
+      <Stack px={"sm"}>
         <Stack spacing={5}>
           <Textarea
             styles={{
@@ -75,28 +120,48 @@ export default function EditCeritaPenggalangDonasi({
             withAsterisk
             label="Pembukaan"
             placeholder="Pembuka dari isi cerita"
-            value={value.pembukaan}
+            value={data.pembukaan}
             error={
-              value.pembukaan === "" ? (
+              data.pembukaan === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
               ) : (
                 ""
               )
             }
             onChange={(val) =>
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 pembukaan: val.target.value,
               })
             }
           />
           <ComponentGlobal_InputCountDown
-            lengthInput={value.pembukaan.length}
+            lengthInput={data.pembukaan.length}
             maxInput={300}
           />
         </Stack>
 
-        <Stack spacing={"lg"}>
+        <Stack>
+          <ComponentGlobal_BoxUploadImage>
+            {updateImage ? (
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250 }}
+                  alt="Foto"
+                  height={250}
+                  src={updateImage}
+                />
+              </AspectRatio>
+            ) : (
+              <Stack align="center" justify="center" p={"xs"} h={"100%"}>
+                <ComponentGlobal_LoadImageCustom
+                  fileId={data.imageId}
+                  height={200}
+                />
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
           <Center>
             <FileButton
               onChange={async (files: any | null) => {
@@ -105,12 +170,8 @@ export default function EditCeritaPenggalangDonasi({
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
 
-                  if (files.size > maksimalUploadFile) {
-                    ComponentGlobal_WarningMaxUpload({});
-                  } else {
-                    setUpdateImage(buffer);
-                    setFile(files);
-                  }
+                  setUpdateImage(buffer);
+                  setFile(files);
                 } catch (error) {
                   console.log(error);
                 }
@@ -131,27 +192,6 @@ export default function EditCeritaPenggalangDonasi({
               )}
             </FileButton>
           </Center>
-          <AspectRatio ratio={1 / 1} mah={300}>
-            <Paper
-              style={{
-                border: `2px solid ${AccentColor.blue}`,
-                backgroundColor: AccentColor.darkblue,
-                padding: "10px",
-                borderRadius: "10px",
-              }}
-            >
-              <Image
-                alt="Foto"
-                src={
-                  updateImage
-                    ? updateImage
-                    : RouterDonasi.api_image_cerita +
-                      value.imageCeritaDonasi.url
-                }
-                maw={200}
-              />
-            </Paper>
-          </AspectRatio>
         </Stack>
 
         <Stack spacing={5}>
@@ -167,23 +207,23 @@ export default function EditCeritaPenggalangDonasi({
             withAsterisk
             label="Cerita"
             placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
-            value={value.cerita}
+            value={data.cerita}
             error={
-              value.cerita === "" ? (
+              data.cerita === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
               ) : (
                 ""
               )
             }
             onChange={(val) =>
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 cerita: val.target.value,
               })
             }
           />
           <ComponentGlobal_InputCountDown
-            lengthInput={value.cerita.length}
+            lengthInput={data.cerita.length}
             maxInput={300}
           />
         </Stack>
@@ -194,12 +234,12 @@ export default function EditCeritaPenggalangDonasi({
           }}
           loaderPosition="center"
           loading={isLoading ? true : false}
-          disabled={
-            value.cerita === "" || value.pembukaan === "" ? true : false
-          }
+          disabled={data.cerita === "" || data.pembukaan === "" ? true : false}
           w={"100%"}
           radius={"xl"}
-          onClick={() => onUpdate(router, value, file as any)}
+          onClick={() => {
+            onUpdate();
+          }}
           bg={MainColor.yellow}
           color="yellow"
           c={"black"}
@@ -211,30 +251,3 @@ export default function EditCeritaPenggalangDonasi({
     </>
   );
 }
-
-async function onUpdate(
-  router: any,
-  value: MODEL_CERITA_DONASI,
-  file: FormData
-) {
-  // router.back();
-  const body = {
-    id: value.id,
-    pembukaan: value.pembukaan,
-    cerita: value.cerita,
-    imagesId: value.imageCeritaDonasi.id,
-  };
-
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
-  await Donasi_funUpdateCerita(body as any, gambar).then((res) => {
-    if (res.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/donasi/edit/edit_donasi/index.tsx

@@ -1,35 +1,37 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_LoadImageCustom,
+} from "@/app_modules/_global/component";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import {
-  ComponentGlobal_WarningMaxUpload,
-  maksimalUploadFile,
-} from "@/app_modules/_global/component/waring_popup";
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
 import {
   AspectRatio,
   Button,
   Center,
   FileButton,
   Image,
-  Paper,
   Select,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { IconCamera } from "@tabler/icons-react";
-import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
-import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function EditDonasi({
   dataDonasi,
@@ -42,20 +44,76 @@ export default function EditDonasi({
 }) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
-
-  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
-    gs_donasi_tabs_posting
-  );
-  const [value, setValue] = useState(dataDonasi);
+  const [data, setData] = useState(dataDonasi);
   const [kategori, setKategori] = useState(masterKategori);
   const [durasi, setDurasi] = useState(masterDurasi);
   const [file, setFile] = useState<File | null>(null);
   const [updateImage, setUpdateImage] = useState<any | null>();
-  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onUpdate() {
+    setLoading(true);
+    const body = {
+      id: data.id,
+      donasiMaster_KategoriId: data.DonasiMaster_Ketegori.id,
+      donasiMaster_DurasiId: data.DonasiMaster_Durasi.id,
+      title: data.title,
+      target: data.target,
+    };
+
+    if (_.values(body).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
+
+    try {
+      if (file !== null) {
+        const uploadImage = await funGlobal_UploadToStorage({
+          file: file as File,
+          dirId: DIRECTORY_ID.donasi_image,
+        });
+        if (!uploadImage.success) {
+          setLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+        }
+
+        const deleteImage = await funGlobal_DeleteFileById({
+          fileId: data.imageId,
+        });
+        if (!deleteImage.success) {
+          setLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+        }
+
+        const res = await Donasi_funUpdateDonasi({
+          data: body as any,
+          fileId: uploadImage.data.id,
+        });
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiPeringatan(res.message);
+          setLoading(false);
+        }
+      } else {
+        const res = await Donasi_funUpdateDonasi({
+          data: body as any,
+        });
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiPeringatan(res.message);
+          setLoading(false);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
   return (
     <>
-      {/* <pre>{JSON.stringify(donasi, null, 2)}</pre> */}
       <Stack spacing={"md"} px={"md"}>
         <Select
           styles={{
@@ -65,42 +123,43 @@ export default function EditDonasi({
           }}
           label="Kategori"
           placeholder="Pilih kategori penggalangan dana"
-          value={value.DonasiMaster_Ketegori.id}
+          value={data.DonasiMaster_Ketegori.id}
           withAsterisk
           data={kategori.map((e) => ({
             value: e.id,
             label: e.name,
           }))}
           onChange={(val) =>
-            setValue({
-              ...(value as any),
+            setData({
+              ...(data as any),
               DonasiMaster_Ketegori: {
                 id: val,
               },
             })
           }
         />
+
         <Stack>
-          <AspectRatio ratio={1 / 1} mah={300}>
-            <Paper
-              style={{
-                border: `2px solid ${AccentColor.blue}`,
-                backgroundColor: AccentColor.darkblue,
-                padding: "10px",
-                borderRadius: "10px",
-              }}
-            >
-              <Image
-                alt="Foto"
-                src={
-                  updateImage
-                    ? updateImage
-                    : RouterDonasi.api_gambar + `${value.imagesId}`
-                }
-                maw={200}
-              />
-            </Paper>
-          </AspectRatio>
+          <ComponentGlobal_BoxUploadImage>
+            {updateImage ? (
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250 }}
+                  alt="Foto"
+                  height={250}
+                  src={updateImage}
+                />
+              </AspectRatio>
+            ) : (
+              <Stack align="center" justify="center" p={"xs"} h={"100%"}>
+                <ComponentGlobal_LoadImageCustom
+                  fileId={data.imageId}
+                  height={200}
+                />
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
           <Center>
             <FileButton
               onChange={async (files: any | null) => {
@@ -109,12 +168,8 @@ export default function EditDonasi({
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
 
-                  if (files.size > maksimalUploadFile) {
-                    ComponentGlobal_WarningMaxUpload({});
-                  } else {
-                    setUpdateImage(buffer);
-                    setFile(files);
-                  }
+                  setUpdateImage(buffer);
+                  setFile(files);
                 } catch (error) {
                   console.log(error);
                 }
@@ -136,6 +191,7 @@ export default function EditDonasi({
             </FileButton>
           </Center>
         </Stack>
+
         <Stack>
           <TextInput
             styles={{
@@ -146,22 +202,23 @@ export default function EditDonasi({
             withAsterisk
             label="Judul Donasi"
             placeholder="Contoh: Renovasi Masjid pada kampung, dll"
-            value={value.title}
+            value={data.title}
             maxLength={100}
             error={
-              value.title === "" ? (
+              data.title === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan judul" />
               ) : (
                 ""
               )
             }
             onChange={(val) =>
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 title: val.target.value,
               })
             }
           />
+          
           <TextInput
             styles={{
               label: {
@@ -173,9 +230,9 @@ export default function EditDonasi({
             withAsterisk
             label="Target Dana"
             placeholder="0"
-            value={value.target}
+            value={data.target}
             error={
-              value.target === "" || value.target === "0" ? (
+              data.target === "" || data.target === "0" ? (
                 <ComponentGlobal_ErrorInput text="Masukan target dana" />
               ) : (
                 ""
@@ -187,8 +244,8 @@ export default function EditDonasi({
                 .match(/^[0-9]+$/);
 
               if (val.currentTarget.value === "")
-                return setValue({
-                  ...value,
+                return setData({
+                  ...data,
                   target: 0 + "",
                 });
               if (!match?.[0]) return null;
@@ -196,8 +253,8 @@ export default function EditDonasi({
               const nilai = val.currentTarget.value.replace(/\./g, "");
               const target = Intl.NumberFormat("id-ID").format(+nilai);
 
-              setValue({
-                ...value,
+              setData({
+                ...data,
                 target: target,
               });
             }}
@@ -211,14 +268,14 @@ export default function EditDonasi({
             label="Durasi"
             placeholder="Jangka waktu penggalangan dana"
             withAsterisk
-            value={value.DonasiMaster_Durasi.id}
+            value={data.DonasiMaster_Durasi.id}
             data={durasi.map((e) => ({
               value: e.id,
               label: e.name + " " + `hari`,
             }))}
             onChange={(val) =>
-              setValue({
-                ...(value as any),
+              setData({
+                ...(data as any),
                 DonasiMaster_Durasi: {
                   id: val,
                 },
@@ -230,13 +287,13 @@ export default function EditDonasi({
           style={{
             transition: "0.5s",
           }}
-          disabled={value.title === "" || value.target === "0" ? true : false}
+          disabled={data.title === "" || data.target === "0" ? true : false}
           loaderPosition="center"
           loading={isLoading ? true : false}
           my={"lg"}
           radius={"xl"}
           onClick={() => {
-            onUpdate(value, file as any, router);
+            onUpdate();
           }}
           bg={MainColor.yellow}
           color="yellow"
@@ -248,28 +305,3 @@ export default function EditDonasi({
     </>
   );
 }
-
-async function onUpdate(value: MODEL_DONASI, file: FormData, router: any) {
-  const body = {
-    id: value.id,
-    donasiMaster_KategoriId: value.DonasiMaster_Ketegori.id,
-    donasiMaster_DurasiId: value.DonasiMaster_Durasi.id,
-    title: value.title,
-    target: value.target,
-    imagesId: value.imagesId,
-  };
-
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
-
-  await Donasi_funUpdateDonasi(body as any, gambar).then((res) => {
-    if (res.status === 200) {
-      NotifBerhasil(res.message);
-      router.back();
-    } else {
-      NotifPeringatan(res.message);
-    }
-  });
-}

src/app_modules/donasi/edit/edit_rekening/index.tsx

@@ -7,10 +7,12 @@ 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";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+} from "@/app_modules/_global/notif_global";
 
 export default function Donasi_EditRekening({
   dataDonasi,
@@ -106,9 +108,9 @@ async function onUpdate(
     if (res.status === 200) {
       setLoading(true);
       router.back();
-      NotifBerhasil(res.message);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
     } else {
-      NotifGagal(res.message);
+      ComponentGlobal_NotifikasiGagal(res.message);
     }
   });
 }

src/app_modules/donasi/edit/update_kabar/index.tsx

@@ -1,24 +1,12 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Paper,
-  Stack,
-  Group,
-  Avatar,
-  Title,
-  Text,
-  AspectRatio,
-  Image,
-  Divider,
-} from "@mantine/core";
-import moment from "moment";
-import { MODEL_DONASI_KABAR } from "../../model/interface";
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
 
 export default function UpdateKabarDonasi({
   dataKabar,
@@ -28,38 +16,27 @@ export default function UpdateKabarDonasi({
   const [kabar, setKabar] = useState(dataKabar);
   return (
     <>
-      <Stack
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "20px",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "15px",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         <Stack>
           <Group position="right">
-            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+            <Text>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                kabar.createdAt
+              )}
+            </Text>
           </Group>
+
+          {kabar.imageId === null ? (
+            ""
+          ) : (
+            <ComponentGlobal_LoadImageLandscape fileId={kabar.imageId} />
+          )}
           <Title align="center" order={4}>
             {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>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/edit/update_kabar/layout.tsx

@@ -1,25 +1,20 @@
 "use client";
 
+import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
 import {
-  AppShell,
-  Button,
-  Center,
-  Divider,
-  Footer,
-  Group,
-  Header,
-} from "@mantine/core";
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { UIGlobal_DrawerCustom } from "@/app_modules/_global/ui";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon, Center, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import React from "react";
-import FooterDonasi from "../../component/footer_close_donasi";
-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";
-import { NotifGagal } from "../../component/notifikasi/notif_gagal";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 
 export default function LayoutUpdateKabarDonasi({
   children,
@@ -29,39 +24,77 @@ export default function LayoutUpdateKabarDonasi({
   kabarId: string;
 }) {
   const router = useRouter();
+  const [openDrawer, setOpenDrawer] = React.useState(false);
 
+  async function onDelete() {
+    const res = await Donasi_funDeleteKabar(kabarId);
+    if (res.status === 200) {
+      const deleteImage = await funGlobal_DeleteFileById({
+        fileId: res.imageId as any,
+      });
+
+      if (!deleteImage.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      }
+
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Update Kabar" />}
-        footer={
-          <Group align="center" h={"100%"} position="center" spacing={"xl"}>
-            {/* <Button radius={"xl"} variant="outline" color="green">
-                Edit
-              </Button> */}
-            <Button
-              radius={"xl"}
-              color="red"
-              onClick={() => onDelete(router, kabarId)}
-            >
-              Hapus
-            </Button>
-          </Group>
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Update Kabar"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
         }
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_DrawerCustom
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={
+          <SimpleGrid cols={2}>
+            <Center>
+              <Stack
+                align="center"
+                spacing={"xs"}
+                onClick={() => {
+                  router.push(RouterDonasi.edit_kabar({ id: kabarId }), {
+                    scroll: false,
+                  });
+                }}
+              >
+                <ActionIcon variant="transparent">
+                  <IconEdit color="white" />
+                </ActionIcon>
+                <Text color="white">Edit kabar</Text>
+              </Stack>
+            </Center>
+            <Center>
+              <Stack align="center" spacing={"xs"} onClick={() => onDelete()}>
+                <ActionIcon variant="transparent">
+                  <IconTrash color="red" />
+                </ActionIcon>
+                <Text color="red">Hapus kabar</Text>
+              </Stack>
+            </Center>
+          </SimpleGrid>
+        }
+      />
     </>
   );
 }
-
-async function onDelete(router: AppRouterInstance, kabarId: string) {
-  await Donasi_funDeleteKabar(kabarId).then((res) => {
-    if (res.status === 200) {
-      router.back();
-      NotifBerhasil(res.message);
-    } else {
-      NotifGagal(res.message);
-    }
-  });
-}

src/app_modules/donasi/fun/create/fun_create_kabar.ts

@@ -1,68 +1,48 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
-import _ from "lodash";
-import { v4 } from "uuid";
-import fs from "fs";
-import { MODEL_DONASI_KABAR } from "../../model/interface";
-import { revalidatePath } from "next/cache";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { revalidatePath } from "next/cache";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
 
-export async function Donasi_funCreateKabar(
-  req: MODEL_DONASI_KABAR | any,
-  file: FormData
-) {
-  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({
+export async function Donasi_funCreateKabar({
+  data,
+  fileId,
+}: {
+  data: MODEL_DONASI_KABAR;
+  fileId?: string;
+}) {
+  if (fileId !== undefined) {
+    const createWithFile = await prisma.donasi_Kabar.create({
       data: {
-        url: fRandomName,
-        label: "DONASI_KABAR",
-      },
-      select: {
-        id: true,
-        url: true,
+        title: data.title,
+        deskripsi: data.deskripsi,
+        donasiId: data.donasiId,
+        imageId: fileId,
       },
     });
 
-    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 createWithPhoto = await prisma.donasi_Kabar.create({
-      data: {
-        title: req.title,
-        deskripsi: req.deskripsi,
-        donasiId: req.donasiId,
-        imagesId: upload.id,
-      },
-    
-    });
-
-    if (!createWithPhoto) return { status: 400, message: "Gagal membuat data" };
+    if (!createWithFile) return { status: 400, message: "Gagal disimpan" };
+    revalidatePath(RouterDonasi.list_kabar + data.donasiId);
     return {
       status: 200,
       message: "Berhasil disimpan",
-      kabarId: createWithPhoto.id,
+      kabarId: createWithFile.id,
+    };
+  } else {
+    const create = await prisma.donasi_Kabar.create({
+      data: {
+        title: data.title,
+        deskripsi: data.deskripsi,
+        donasiId: data.donasiId,
+      },
+    });
+
+    revalidatePath(RouterDonasi.list_kabar + data.donasiId);
+    return {
+      status: 200,
+      message: "Berhasil disimpan",
+      kabarId: create.id,
     };
   }
-
-  const create = await prisma.donasi_Kabar.create({
-    data: {
-      title: req.title,
-      deskripsi: req.deskripsi,
-      donasiId: req.donasiId,
-    },
-  });
-
-  revalidatePath("/dev/donasi/list_kabar");
-  return {
-    status: 200,
-    message: "Berhasil disimpan",
-    kabarId: create.id,
-  };
 }

src/app_modules/donasi/fun/delete/fin_delete_donasi_by_id.ts

@@ -1,86 +1,15 @@
 "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,
+      donasiId: donasiId,
     },
   });
 
-  if(!delCerita) return {status: 400, message: "Gagal hapus data cerita"}
+  if (!delCerita) return { status: 400, message: "Gagal hapus data cerita" };
 
   const delDonasi = await prisma.donasi.delete({
     where: {

src/app_modules/donasi/fun/delete/fun_delete.kabar.ts

@@ -1,51 +1,24 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
-import fs from "fs";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { revalidatePath } from "next/cache";
 
 export async function Donasi_funDeleteKabar(kabarId: string) {
-  const dataKabar = await prisma.donasi_Kabar.findFirst({
-    where: {
-      id: kabarId,
-    },
-    select: {
-      imagesId: true,
-    },
-  });
-
-  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: {
-      donasi_KabarId: kabarId,
-    },
-  });
-  if (!delNotif) return { status: 400, message: "Gagal hapus notif" };
-
   const del = await prisma.donasi_Kabar.delete({
     where: {
       id: kabarId,
     },
+    select:{
+      imageId: true
+    }
   });
   if (!del) return { status: 400, message: "Gagal hapus data" };
 
-  revalidatePath("/dev/donasi/notif_page");
+  revalidatePath(RouterDonasi.list_kabar);
   return {
     status: 200,
     message: "Berhasl hapus",
+    imageId: del.imageId
   };
 }

src/app_modules/donasi/fun/get/get_all_invoice_by_author_id.tsx

@@ -43,6 +43,7 @@ export async function donasi_funGetAllInvoiceByAuthorId({
           DonasiMaster_Ketegori: true,
           DonasiMaster_Durasi: true,
           DonasiMaster_Status: true,
+          imageId: true,
         },
       },
     },

src/app_modules/donasi/fun/get/get_one_invoice_by_id.tsx

@@ -3,7 +3,6 @@
 import prisma from "@/app/lib/prisma";
 
 export async function Donasi_getOneInvoiceById(invoiceId: string) {
-
   const res = await prisma.donasi_Invoice.findFirst({
     where: {
       id: invoiceId,
@@ -17,32 +16,33 @@ export async function Donasi_getOneInvoiceById(invoiceId: string) {
       donasiMaster_StatusInvoiceId: true,
       Donasi: {
         select: {
-            id: true,
-            title: true,
-            target: true,
-            active: true,
-            createdAt: true,
-            updatedAt: true,
-            publishTime: true,
-            catatan: true,
-            progres: true,
-            terkumpul: true,
-            authorId: true,
-            imagesId: true,
-            donasiMaster_KategoriId: true,
-            donasiMaster_DurasiId: true,
-            donasiMaster_StatusDonasiId: true,
-            Author: true,
-            imageDonasi: true,
-            CeritaDonasi: true,
-            DonasiMaster_Ketegori: true,
-            DonasiMaster_Durasi: true,
-            DonasiMaster_Status: true,
-        }
+          id: true,
+          title: true,
+          target: true,
+          active: true,
+          createdAt: true,
+          updatedAt: true,
+          publishTime: true,
+          catatan: true,
+          progres: true,
+          terkumpul: true,
+          authorId: true,
+          imagesId: true,
+          donasiMaster_KategoriId: true,
+          donasiMaster_DurasiId: true,
+          donasiMaster_StatusDonasiId: true,
+          Author: true,
+          imageDonasi: true,
+          CeritaDonasi: true,
+          DonasiMaster_Ketegori: true,
+          DonasiMaster_Durasi: true,
+          DonasiMaster_Status: true,
+          imageId: true,
+        },
       },
       DonasiMaster_Bank: true,
       DonasiMaster_StatusInvoice: true,
     },
   });
-  return res
+  return res;
 }

src/app_modules/donasi/fun/index.ts

@@ -1,4 +1,6 @@
 import { Donasi_getMasterKategori } from "./master/get_ketegori";
 import { Donasi_getMasterDurasi } from "./master/get_durasi";
+import { donasi_funUpdateKabar } from "./update/fun_update_kabar";
 
 export { Donasi_getMasterKategori, Donasi_getMasterDurasi };
+export { donasi_funUpdateKabar };

src/app_modules/donasi/fun/update/fun_update_cerita_donasi.ts

@@ -1,42 +1,28 @@
 "use server";
 
-import _ from "lodash";
-import { MODEL_CERITA_DONASI } from "../../model/interface";
-import { v4 } from "uuid";
 import prisma from "@/app/lib/prisma";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { revalidatePath } from "next/cache";
-import fs from "fs";
+import { MODEL_CERITA_DONASI } from "../../model/interface";
 
-export async function Donasi_funUpdateCerita(
-  data: MODEL_CERITA_DONASI,
-  file: FormData
-) {
-
-
-  const gambar: any = file.get("file");
-  if (gambar !== "null") {
-    const fileName = gambar.name;
-    const fileExtension = _.lowerCase(gambar.name.split(".").pop());
-    const fileRandomName = v4(fileName) + "." + fileExtension;
-
-
-    const updateGambar = await prisma.images.update({
+export async function Donasi_funUpdateCerita({
+  data,
+  fileId,
+}: {
+  data: MODEL_CERITA_DONASI;
+  fileId?: string;
+}) {
+  if (fileId !== undefined) {
+    const updateFileId = await prisma.donasi_Cerita.update({
       where: {
-        id: data.imagesId,
+        id: data.id,
       },
       data: {
-        url: fileRandomName,
+        imageId: fileId,
       },
     });
 
-    if (!updateGambar) return { status: 400, message: "Update gambat gagal" };
-    revalidatePath("/dev/donasi/detail/detail_draft");
-
-    const uploadFolder = Buffer.from(await gambar.arrayBuffer());
-    fs.writeFileSync(
-      `./public/donasi/image_cerita/${updateGambar.url}`,
-      uploadFolder
-    );
+    if (!updateFileId) return { status: 400, message: "Gagal update" };
   }
 
   const update = await prisma.donasi_Cerita.update({
@@ -50,7 +36,7 @@ export async function Donasi_funUpdateCerita(
   });
 
   if (!update) return { status: 400, message: "Gagal update cerita" };
-  revalidatePath("/dev/donasi/detail/detail_draft");
+  revalidatePath(RouterDonasi.detail_draft + data.id);
 
   return {
     status: 200,

src/app_modules/donasi/fun/update/fun_update_donasi.ts

@@ -1,52 +1,28 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
-import { MODEL_DONASI } from "../../model/interface";
-import _ from "lodash";
-import { v4 } from "uuid";
-import fs from "fs";
-import { revalidatePath, revalidateTag } from "next/cache";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { revalidatePath } from "next/cache";
+import { MODEL_DONASI } from "../../model/interface";
 
-export async function Donasi_funUpdateDonasi(
-  data: MODEL_DONASI,
-  file: FormData
-) {
-  //   console.log(data);
-
-  const gambar: any = file.get("file");
-  if (gambar !== "null") {
-    const fileName = gambar.name;
-    const fileExtension = _.lowerCase(gambar.name.split(".").pop());
-    const fileRandomName = v4(fileName) + "." + fileExtension;
-
-    const cariGambar = await prisma.images.findFirst({
+export async function Donasi_funUpdateDonasi({
+  data,
+  fileId,
+}: {
+  data: MODEL_DONASI;
+  fileId?: string;
+}) {
+  if (fileId !== undefined) {
+    const updateFileId = await prisma.donasi.update({
       where: {
-        id: data.imagesId,
-      },
-      select: {
-        url: true,
-      },
-    });
-
-    if (!cariGambar) return { status: 400, message: "Gambar tidak ditemukan" };
-    revalidatePath("/dev/donasi/detail/detail_draft");
-    fs.unlinkSync(`./public/donasi/image/${cariGambar.url}`);
-
-    const updateGambar = await prisma.images.update({
-      where: {
-        id: data.imagesId,
+        id: data.id,
       },
       data: {
-        url: fileRandomName,
+        imageId: fileId,
       },
     });
 
-    if (!updateGambar) return { status: 400, message: "Update gambat gagal" };
-    revalidatePath("/dev/donasi/detail/detail_draft");
-
-    const uploadFolder = Buffer.from(await gambar.arrayBuffer());
-    fs.writeFileSync(`./public/donasi/image/${updateGambar.url}`, uploadFolder);
+    if (!updateFileId) return { status: 400, message: "Gagal update" };
   }
 
   const update = await prisma.donasi.update({
@@ -62,7 +38,7 @@ export async function Donasi_funUpdateDonasi(
   });
 
   if (!update) return { status: 400, message: "Gagal update" };
-  revalidatePath("/dev/donasi/detail/detail_draft");
+  revalidatePath(RouterDonasi.detail_draft + data.id);
 
   return {
     status: 200,

src/app_modules/donasi/fun/update/fun_update_invoice.ts

@@ -1,41 +1,20 @@
 "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);
 
+export async function Donasi_funUploadBuktiTransferById({
+  invoiceId,
+  fileId,
+}: {
+  invoiceId: string;
+  fileId: string;
+}) {
   const updateFile = await prisma.donasi_Invoice.update({
     where: {
       id: invoiceId,
     },
     data: {
-      imagesId: upload.id,
+      imageId: fileId,
     },
   });
 

src/app_modules/donasi/fun/update/fun_update_kabar.tsx

@@ -0,0 +1,45 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { revalidatePath } from "next/cache";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+
+export async function donasi_funUpdateKabar({
+  data,
+  fileId,
+}: {
+  data: MODEL_DONASI_KABAR;
+  fileId?: string;
+}) {
+  if (fileId !== undefined) {
+    const updt = await prisma.donasi_Kabar.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        title: data.title,
+        deskripsi: data.deskripsi,
+        imageId: fileId,
+      },
+    });
+
+    if (!updt) return { status: 400, message: "Gagal Update" };
+    revalidatePath(RouterDonasi.update_kabar + data.id);
+    return { status: 200, message: "Berhasil Update" };
+  } else {
+    const updt = await prisma.donasi_Kabar.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        title: data.title,
+        deskripsi: data.deskripsi,
+      },
+    });
+
+    if (!updt) return { status: 400, message: "Gagal Update" };
+    revalidatePath(RouterDonasi.update_kabar + data.id);
+    return { status: 200, message: "Berhasil Update" };
+  }
+}

src/app_modules/donasi/fun/update/fun_update_status_invoice.ts

@@ -3,19 +3,22 @@
 import prisma from "@/app/lib/prisma";
 import { revalidatePath } from "next/cache";
 
-export async function Donasi_funUpdateStatusInvoice(
-  invoiceId: string,
-  statusId: string
-) {
-  //   console.log(invoiceId, "invoice Id");
-  //   console.log(status, "status");
-
+export async function Donasi_funUpdateStatusInvoice({
+  invoiceId,
+  statusId,
+  fileId,
+}: {
+  invoiceId: string;
+  statusId: string;
+  fileId: string;
+}) {
   const data = await prisma.donasi_Invoice.update({
     where: {
       id: invoiceId,
     },
     data: {
       donasiMaster_StatusInvoiceId: statusId,
+      imageId: fileId,
     },
     select: {
       id: true,
@@ -36,7 +39,7 @@ export async function Donasi_funUpdateStatusInvoice(
 
   if (!data)
     return { status: 400, message: "Gagal memperbarui status transaksi" };
-  revalidatePath("dev/admin/donasi/detail/publish");
+  // revalidatePath("dev/admin/donasi/detail/publish");
   return {
     data: data,
     status: 200,

src/app_modules/donasi/index.ts

@@ -4,7 +4,6 @@ import GalangDanaDonasi from "./main/galang_dana/ui_galang_dana";
 import DonasiSayaDonasi from "./main/donasi_saya";
 import CreateDonasi from "./create/create_donasi";
 import LayoutCreateDonasi from "./create/layout";
-import PagePopUpCreateDonasi from "./page_pop_up/create";
 import DetailMainDonasi from "./detail/detail_main";
 import LayoutDetailMainDonasi from "./detail/detail_main/layout";
 import MasukanDonasi from "./proses_donasi/masukan_donasi";
@@ -24,8 +23,6 @@ import LayoutCeritaPenggalangDonasi from "./detail/detail_main/cerita_penggalang
 import DetailPublishDonasi from "./detail/detail_publish";
 import LayoutDetailPublishDonasi from "./detail/detail_publish/layout";
 import CreateCeritaPenggalangDonasi from "./create/create_cerita_penggalang";
-import ListKabarDonasi from "./edit/list_kabar";
-import LayoutListKabarDonasi from "./edit/list_kabar/layout";
 import UpdateKabarDonasi from "./edit/update_kabar";
 import LayoutUpdateKabarDonasi from "./edit/update_kabar/layout";
 import DetailReviewDonasi from "./detail/detail_review";
@@ -48,10 +45,6 @@ import Donasi_ProsesTransaksi from "./proses_donasi/proses_transaksi";
 import LayoutDonasi_ProsesTransaksi from "./proses_donasi/proses_transaksi/layout";
 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 { LayoutDonasi_BuktiTransfer } from "./detail/detail_main/bukti_transfer";
@@ -63,7 +56,6 @@ export {
   DonasiSayaDonasi,
   CreateDonasi,
   LayoutCreateDonasi,
-  PagePopUpCreateDonasi,
   DetailMainDonasi,
   LayoutDetailMainDonasi,
   MasukanDonasi,
@@ -83,8 +75,6 @@ export {
   DetailPublishDonasi,
   LayoutDetailPublishDonasi,
   CreateCeritaPenggalangDonasi,
-  ListKabarDonasi,
-  LayoutListKabarDonasi,
   UpdateKabarDonasi,
   LayoutUpdateKabarDonasi,
   DetailReviewDonasi,
@@ -107,10 +97,6 @@ export {
   LayoutDonasi_ProsesTransaksi,
   Donasi_CreateKabar,
   LayoutDonasi_CreateKabar,
-  Donasi_NotifPage,
-  LayoutDonasi_NotifPage,
-  Donasi_DetailNotif,
-  LayoutDonasi_DetailNotif,
   Donasi_EditRekening,
   LayoutDonasi_EditRekening,
 };

src/app_modules/donasi/main/notif/layout.tsx

@@ -1,17 +0,0 @@
-"use client"
-
-import { AppShell } from "@mantine/core"
-import React from "react"
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
-
-export default function LayoutDonasi_NotifPage({children}: {children: React.ReactNode}){
-    return<>
-    <AppShell
-    header={<ComponentDonasi_HeaderTamplate title="Pemberitahuan"/>}
-    >
-
-        {children}
-    </AppShell>
-    
-    </>
-}

src/app_modules/donasi/main/notif/notif_page.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-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";
-import _ from "lodash";
-import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
-
-export default function Donasi_NotifPage({
-  dataNotif,
-}: {
-  dataNotif: MODEL_DONASI_NOTIF[];
-}) {
-  const router = useRouter();
-  const [notif, setNotif] = useState(dataNotif);
-
-  if (_.isEmpty(dataNotif)) {
-    return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
-  }
-
-  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>
-    </>
-  );
-}
-
-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");
-    }
-  });
-}

src/app_modules/donasi/page_pop_up/create.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import { Stack, Title } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { IconCircleCheck } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-
-export default function PagePopUpCreateDonasi() {
-  const router = useRouter();
-  useShallowEffect(() => {
-    setTimeout(
-      () => router.push(RouterDonasi.main_galang_dana, { scroll: false }),
-      2000
-    );
-  }, []);
-  return (
-    <>
-      <UIGlobal_LayoutTamplate>
-        <Stack h={"80vh"} align="center" justify="center">
-          <IconCircleCheck
-            size={100}
-            style={{
-              color: MainColor.yellow,
-            }}
-          />
-          <Title order={3} c={"white"}>
-            Berhasil Membuat Pengalangan Dana
-          </Title>
-        </Stack>
-      </UIGlobal_LayoutTamplate>
-    </>
-  );
-}

src/app_modules/donasi/proses_donasi/invoice/index.tsx

@@ -1,10 +1,13 @@
 "use client";
 
+import { DIRECTORY_ID } from "@/app/lib";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
@@ -23,11 +26,9 @@ import {
 } from "@mantine/core";
 import { IconCamera, IconCircleCheck } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import { Donasi_funUploadBuktiTransferById } from "../../fun/update/fun_update_invoice";
 import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
 import { gs_donasi_hot_menu } from "../../global_state";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
@@ -40,8 +41,61 @@ 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);
   const [active, setActive] = useAtom(gs_donasi_hot_menu);
+  const [isLoading, setLoading] = useState(false);
+
+  async function onClick() {
+    try {
+      setLoading(true);
+      const uploadImage = await funGlobal_UploadToStorage({
+        file: file as File,
+        dirId: DIRECTORY_ID.donasi_bukti_transfer,
+      });
+
+      if (!uploadImage.success) {
+        setLoading(false);
+        return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+      }
+
+      const res = await Donasi_funUpdateStatusInvoice({
+        invoiceId: invoice.id,
+        statusId: "2",
+        fileId: uploadImage.data.id,
+      });
+      if (res.status === 200) {
+        const dataNotif: any = {
+          appId: res.data?.Donasi?.id as any,
+          userId: res.data?.Donasi?.authorId as any,
+          pesan: res.data?.Donasi?.title as any,
+          status: res.data?.DonasiMaster_StatusInvoice?.name,
+          kategoriApp: "DONASI",
+          title: "Donatur melakukan transfer",
+        };
+
+        const notif = await notifikasiToAdmin_funCreate({
+          data: dataNotif as any,
+        });
+
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "ADMIN",
+            JSON.stringify({
+              count: 1,
+            })
+          );
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          setActive(2);
+          router.push(RouterDonasi.proses_transaksi + `${invoice.id}`);
+          setLoading(false);
+        }
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+        setLoading(false);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
   return (
     <>
@@ -203,9 +257,8 @@ export default function Donasi_InvoiceProses({
                     //   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);
                   }
@@ -251,18 +304,12 @@ export default function Donasi_InvoiceProses({
             bg={MainColor.yellow}
             color="yellow"
             c={"black"}
-            onClick={() => onClick(router, invoice.id, setActive)}
+            onClick={() => onClick()}
           >
             Saya Sudah Transfer
           </Button>
         ) : (
-          <Button
-            disabled
-            radius={"xl"}
-            //  bg={"orange"}
-            //  color="orange"
-            //  onClick={() => onClick(router, invoice.id)}
-          >
+          <Button disabled radius={"xl"}>
             Menunggu Bukti Transfer
           </Button>
         )}
@@ -270,52 +317,3 @@ export default function Donasi_InvoiceProses({
     </>
   );
 }
-
-async function onClick(
-  router: AppRouterInstance,
-  invoiceId: string,
-  setActive: any
-) {
-  const res = await Donasi_funUpdateStatusInvoice(invoiceId, "2");
-  if (res.status === 200) {
-    const dataNotif: any = {
-      appId: res.data?.Donasi?.id as any,
-      userId: res.data?.Donasi?.authorId as any,
-      pesan: res.data?.Donasi?.title as any,
-      status: res.data?.DonasiMaster_StatusInvoice?.name,
-      kategoriApp: "DONASI",
-      title: "Donatur melakukan transfer",
-    };
-
-    const notif = await notifikasiToAdmin_funCreate({
-      data: dataNotif as any,
-    });
-
-    if (notif.status === 201) {
-      mqtt_client.publish(
-        "ADMIN",
-        JSON.stringify({
-          count: 1,
-        })
-      );
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      setActive(2);
-      router.push(RouterDonasi.proses_transaksi + `${invoiceId}`);
-    }
-  } else {
-    ComponentGlobal_NotifikasiGagal(res.message);
-  }
-}
-
-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) {
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/donasi/proses_donasi/masukan_donasi/index.tsx

@@ -13,7 +13,7 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
 } from "@mantine/core";
 import {
   IconChevronRight,
@@ -25,8 +25,8 @@ import {
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { gs_proses_donasi } from "../../global_state";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 const listNominal = [
   {
@@ -59,9 +59,12 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
   const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
 
   async function onProses(nominal: number) {
-    if (nominal === 0) return NotifPeringatan("Masukan Nominal");
+    if (nominal === 0)
+      return ComponentGlobal_NotifikasiPeringatan("Masukan Nominal");
     if (nominal < 10000)
-      return NotifPeringatan("Mohon maaf, Minimal donasi Rp. 10.000");
+      return ComponentGlobal_NotifikasiPeringatan(
+        "Mohon maaf, Minimal donasi Rp. 10.000"
+      );
     setProsesDonasi({
       ...prosesDonasi,
       nominal: "" + nominal,

src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { Warna } from "@/app/lib/warna";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import mqtt_client from "@/util/mqtt_client";
 import {
   Center,
   Group,
@@ -14,17 +16,15 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { donasi_getOneStatusInvoiceById } from "../../fun/get/get_one_status_invoice_by_id";
 import { gs_donasi_hot_menu } from "../../global_state";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
-import { redirect, useRouter } from "next/navigation";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { useShallowEffect } from "@mantine/hooks";
-import mqtt_client from "@/util/mqtt_client";
-import { donasi_getOneStatusInvoiceById } from "../../fun/get/get_one_status_invoice_by_id";
 
 export default function Donasi_ProsesTransaksi({
   statusInvoice,
@@ -106,7 +106,7 @@ export default function Donasi_ProsesTransaksi({
                   <Title order={6}>Admin sedang memproses transaksimu</Title>
                   <Paper radius={1000} w={100} h={100}>
                     <Center h={"100%"}>
-                      <Loader size={"lg"} color="yellow" variant="bars" />
+                      <Loader size={"lg"} color="yellow" variant="dots" />
                     </Center>
                   </Paper>
                   <Title order={6}>Mohon menunggu !</Title>

src/app_modules/investasi/_view/transaksi/view_proses_transaksi.tsx

@@ -15,7 +15,11 @@ import {
 import { IconBrandWhatsapp } from "@tabler/icons-react";
 import Link from "next/link";
 
-export function Investasi_ViewProsesTransaksi({ nomorAdmin }: { nomorAdmin : any}) {
+export function Investasi_ViewProsesTransaksi({
+  nomorAdmin,
+}: {
+  nomorAdmin: any;
+}) {
   return (
     <>
       <Stack>
@@ -44,7 +48,7 @@ export function Investasi_ViewProsesTransaksi({ nomorAdmin }: { nomorAdmin : any
                 <Title order={6}>Admin sedang memproses transaksimu</Title>
                 <Paper radius={1000} w={100} h={100}>
                   <Center h={"100%"}>
-                    <Loader size={"lg"} color="yellow" variant="bars" />
+                    <Loader size={"lg"} color="yellow" variant="dots" />
                   </Center>
                 </Paper>
                 <Title order={6}>Mohon menunggu !</Title>

src/app_modules/investasi/create/view.tsx

@@ -6,10 +6,6 @@ import {
   ComponentGlobal_BoxUploadImage,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import {
-  ComponentGlobal_WarningMaxUpload,
-  maksimalUploadFile,
-} from "@/app_modules/_global/component/waring_popup";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/model_default_master";
 import {
   AspectRatio,
@@ -25,12 +21,7 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import {
-  IconCamera,
-  IconCircleCheck,
-  IconFileTypePdf,
-  IconUpload,
-} from "@tabler/icons-react";
+import { IconCamera, IconCircleCheck, IconUpload } from "@tabler/icons-react";
 import _ from "lodash";
 import { useState } from "react";
 import { Investasi_ComponentButtonCreateNewInvestasi } from "../_component";

src/app_modules/investasi/edit_intro/view.tsx

@@ -24,12 +24,9 @@ import {
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
-import {
-  ComponentGlobal_WarningMaxUpload,
-  maksimalUploadFile,
-} from "@/app_modules/_global/component/waring_popup";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/model_default_master";
 import { useDisclosure, useWindowScroll } from "@mantine/hooks";
@@ -37,7 +34,6 @@ import _ from "lodash";
 import { useState } from "react";
 import { MODEL_INVESTASI } from "../_lib/interface";
 import funEditInvestasi from "../fun/fun_edit_investasi";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 
 export default function EditIntroInvestasi({
   dataInvestasi,
@@ -157,12 +153,8 @@ export default function EditIntroInvestasi({
                   new Blob([new Uint8Array(await files.arrayBuffer())])
                 );
 
-                if (files.size > maksimalUploadFile) {
-                  ComponentGlobal_WarningMaxUpload({});
-                } else {
-                  setImg(buffer);
-                  setFl(files);
-                }
+                setImg(buffer);
+                setFl(files);
               } catch (error) {
                 console.log(error);
               }
@@ -323,7 +315,7 @@ export default function EditIntroInvestasi({
             });
           }}
         />
-        
+
         <Select
           styles={{
             label: {