Merge pull request #79 from bipproduction/investasi/ui

Investasi/UI

.env

@@ -1,10 +0,0 @@
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="postgresql://bip:Production_123@localhost:5433/hipmi?schema=public"
-PWD="QWERTYUIOPLKJHGFDSAZXCVBNMQAZWSXEDCRFVTGBYHNUJMIKOLPPOIUYTREWQLKJHGFDSAMNBVCXZlghvftyguhijknhbgvcfytguu8okjnhbgvfty7u8oilkjnhgvtygu7u8ojilnkhbgvhujnkhghvjhukjnhb"
-Client_KEY="SB-Mid-client-9NDTxltqdZrEB9m-"
-Server_KEY="SB-Mid-server-NyltU-U7fLVQd1nv1LWBKylr"

.gitignore

@@ -28,6 +28,9 @@ yarn-error.log*
 # local env files
 .env*.local
 
+# env
+.env
+
 # vercel
 .vercel
 

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
+    "@hookstate/core": "^4.0.1",
     "@mantine/carousel": "^7.1.5",
     "@mantine/core": "^6.0.17",
     "@mantine/dates": "^6.0.17",

src/app/dev/colab/detail/group/[id]/page.tsx

@@ -1,5 +1,8 @@
 import adminColab_getOneRoomChatById from "@/app_modules/admin/colab/fun/get/get_one_room_chat_by_id";
-import { Colab_GroupChatView } from "@/app_modules/colab";
+import {
+  Colab_DetailGrupDiskusi,
+  Colab_GroupChatView,
+} from "@/app_modules/colab";
 import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
@@ -16,14 +19,15 @@ export default async function Page({ params }: { params: { id: string } }) {
   ]);
   let listMsg = await colab_getMessageByRoomId({ roomId: roomId, page: 1 });
   const dataUserLogin = await user_getOneByUserId(userLoginId);
-  // console.log(dataUserLogin);
 
   return (
     <>
-      {/* <ColabViewChat
-        listMsg={listMsg as any}
-        dataRoom={dataRoom as any}
+      {/* <Colab_DetailGrupDiskusi
         userLoginId={userLoginId}
+        listMsg={listMsg}
+        selectRoom={dataRoom as any}
+        dataUserLogin={dataUserLogin as any}
+        roomId={roomId}
       /> */}
 
       <Colab_GroupChatView

src/app/dev/donasi/detail/detail_donasi_saya/[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_publish/[id]/page.tsx

@@ -8,7 +8,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   const countDonatur= await Donasi_getCountDonatur(params.id)
   const userLoginId = await user_getOneUserId();
 
-  console.log(userLoginId)
+  // console.log(userLoginId)
 
   return (
     <>

src/app/dev/donasi/donatur/[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/edit/update_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/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/list_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/proses_donasi/proses_transaksi/[id]/page.tsx

@@ -1,16 +1,18 @@
 import { Donasi_ProsesTransaksi } from "@/app_modules/donasi";
 import { Donasi_getOneInvoiceById } from "@/app_modules/donasi/fun/get/get_one_invoice_by_id";
+import { donasi_getOneStatusInvoiceById } from "@/app_modules/donasi/fun/get/get_one_status_invoice_by_id";
 import donasi_getMasterNomorAdmin from "@/app_modules/donasi/fun/master/get_nomor_admin";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  // console.log(params.id)
-  const dataInvoice = await Donasi_getOneInvoiceById(params.id);
+  let invoiceId = params.id;
   const nomorAdmin = await donasi_getMasterNomorAdmin();
+  const statusInvoice = await donasi_getOneStatusInvoiceById({invoiceId: invoiceId})
+  // console.log(statusInvoice)
 
   return (
     <>
       <Donasi_ProsesTransaksi
-        dataInvoice={dataInvoice as any}
+        statusInvoice={statusInvoice as any}
         nomorAdmin={nomorAdmin}
       />
     </>

src/app/dev/event/detail/publish/[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/event/detail/publish/[id]/page.tsx

@@ -1,9 +1,20 @@
 import { Event_DetailPublish } from "@/app_modules/event";
+import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
+import { Event_getListPesertaById } from "@/app_modules/event/fun/get/get_list_peserta_by_id";
 import { Event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let eventId = params.id;
   const dataEvent = await Event_getOneById(eventId);
+  const listPeserta = await Event_getListPesertaById(eventId);
+  const totalPeserta = await Event_countTotalPesertaById(eventId);
 
-  return <Event_DetailPublish dataEvent={dataEvent as any} />;
+
+  return (
+    <Event_DetailPublish
+      dataEvent={dataEvent as any}
+      listPeserta={listPeserta}
+      totalPeserta={totalPeserta}
+    />
+  );
 }

src/app/dev/investasi/create/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/investasi/create/page.tsx

@@ -24,7 +24,6 @@ export default async function Page() {
   const pembagianDeviden = await getPembagianDeviden();
   const statusInvestasi = await getStatusInvestasi();
 
-
   return (
     <>
       <InvestasiCreate

src/app/dev/investasi/detail/[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/investasi/detail_dokumen/[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/investasi/detail_portofolio/draft/[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/investasi/detail_portofolio/publish/[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/investasi/detail_portofolio/reject/[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/investasi/detail_portofolio/review/[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/investasi/detail_prospektus/[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/investasi/edit_dokumen/[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/investasi/edit_intro/[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/investasi/edit_prospektus/[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/investasi/list_edit_berita/[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/investasi/main/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/investasi/upload_dokumen/[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/investasi/upload_prospektus/[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_modules/admin/donasi/detail/detail_review.tsx

@@ -35,6 +35,8 @@ import { AdminDonasi_funUpdateStatusReject } from "../fun/update/fun_status_reje
 import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
 import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
 import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminDonasi_DetailReview({
   dataReview,
@@ -80,22 +82,36 @@ function ButtonOnHeader({
   const [catatan, setCatatan] = useState("");
 
   async function onPulish() {
-    await AdminDonasi_funUpdateStatusPublish(donasi.id, "1").then(
-      async (res) => {
-        if (res.status === 200) {
-          const newData = await AdminDonasi_getOneById(donasi?.id);
-          setData(newData);
-          ComponentAdminGlobal_NotifikasiBerhasil(
-            "Berhasil Mengubah Status Donasi"
-          );
-          setLoadingPublish(true);
-        } else {
-          ComponentAdminGlobal_NotifikasiPeringatan(
-            "Gagal Mengubah Status Donasi"
-          );
-        }
+    const res = await AdminDonasi_funUpdateStatusPublish(donasi.id, "1");
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Donasi publish",
+      };
+
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: res?.data?.authorId, count: 1 })
+        );
+        const newData = await AdminDonasi_getOneById(donasi?.id);
+        setData(newData);
+        ComponentAdminGlobal_NotifikasiBerhasil(
+          "Berhasil Mengubah Status Donasi"
+        );
+        setLoadingPublish(true);
       }
-    );
+    } else {
+      ComponentAdminGlobal_NotifikasiPeringatan("Gagal Mengubah Status Donasi");
+    }
   }
 
   async function onReject() {
@@ -104,19 +120,40 @@ function ButtonOnHeader({
         "Lengkapi Alasan Penolakan"
       );
 
-    await AdminDonasi_funUpdateStatusReject(donasi.id, "4", catatan).then(
-      async (res) => {
-        if (res.status === 200) {
-          const newData = await AdminDonasi_getOneById(donasi?.id);
-          setData(newData);
-          close();
-          ComponentAdminGlobal_NotifikasiBerhasil(res.message);
-          setLoadingReject(true);
-        } else {
-          ComponentAdminGlobal_NotifikasiGagal(res.message);
-        }
-      }
+    const res = await AdminDonasi_funUpdateStatusReject(
+      donasi.id,
+      "4",
+      catatan
     );
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Donasi anda di tolak !",
+      };
+
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: res?.data?.authorId, count: 1 })
+        );
+      }
+
+      const newData = await AdminDonasi_getOneById(donasi?.id);
+      setData(newData);
+      close();
+      ComponentAdminGlobal_NotifikasiBerhasil(res.message);
+      setLoadingReject(true);
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   return (
@@ -190,5 +227,3 @@ function ButtonOnHeader({
     </>
   );
 }
-
-

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

@@ -55,6 +55,8 @@ import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
 import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_gagal";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminDonasi_DetailPublish({
   dataPublish,
@@ -266,7 +268,6 @@ function TampilanListDonatur({
   donatur: any;
   listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
   dataDonasi: MODEL_DONASI;
-
   onSuccessDonasi: (val: any) => void;
 }) {
   const router = useRouter();
@@ -509,6 +510,57 @@ function ButtonAccept({
       target: target,
     });
     if (updateStatus.status == 200) {
+      const dataNotif = {
+        appId: updateStatus.data?.id,
+        userId: updateStatus.data?.authorId,
+        pesan: updateStatus.data?.Donasi?.title,
+        status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
+        kategoriApp: "DONASI",
+        title: "Terimakasih, Donasi anda telah diterima",
+      };
+
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
+        );
+
+        mqtt_client.publish(
+          "donasi_invoice",
+          JSON.stringify({
+            invoiceId: invoiceId,
+            statusInvoiceId: "1",
+          })
+        );
+      }
+
+      const dataNotifToAuthorDonasi = {
+        appId: updateStatus.data?.Donasi?.id,
+        userId: updateStatus.data?.Donasi?.authorId,
+        pesan: updateStatus.data?.Donasi?.title,
+        status: "Donatur Baru",
+        kategoriApp: "DONASI",
+        title: "Ada donatur baru",
+      };
+
+      const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
+        data: dataNotifToAuthorDonasi as any,
+      });
+
+      if (notifToAuthorDonasi.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({
+            userId: updateStatus?.data?.Donasi?.authorId,
+            count: 1,
+          })
+        );
+      }
+
       const updateData = await AdminDonasi_getOneById(donasiId);
       onSuccessDonasi(updateData as any);
       const updatelistDonatur = await adminDonasi_getListDonatur({
@@ -516,7 +568,6 @@ function ButtonAccept({
         page: 1,
       });
       onSuccessDonatur(updatelistDonatur);
-
       ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
     } else {
       ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);

src/app_modules/admin/donasi/fun/count/fun_count_donatur.ts

@@ -5,7 +5,8 @@ import prisma from "@/app/lib/prisma";
 export async function AdminDonasi_funCountDonatur(donasiId: string) {
   const donatur = await prisma.donasi_Invoice.count({
    where: {
-    donasiId: donasiId
+    donasiId: donasiId,
+    donasiMaster_StatusInvoiceId: "1"
    }
   });
 

src/app_modules/admin/donasi/fun/get/get_list_review.ts

@@ -20,7 +20,7 @@ export default async function adminDonasi_getListReview({
     skip: skipData,
     take: takeData,
     orderBy: {
-      createdAt: "desc",
+      updatedAt: "desc",
     },
     where: {
       donasiMaster_StatusDonasiId: "2",

src/app_modules/admin/donasi/fun/get/get_one_by_id.ts

@@ -33,7 +33,6 @@ export async function AdminDonasi_getOneById(id: string) {
       DonasiMaster_Ketegori: true,
       DonasiMaster_Durasi: true,
       DonasiMaster_Status: true,
-      
     },
   });
   return res;

src/app_modules/admin/donasi/fun/update/fun_status_publish.ts

@@ -1,6 +1,7 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { revalidatePath } from "next/cache";
@@ -19,11 +20,22 @@ export async function AdminDonasi_funUpdateStatusPublish(
       donasiMaster_StatusDonasiId: statusId,
       publishTime: new Date(publishTime),
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      DonasiMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
 
   if (!data) return { status: 400, message: "Data tidak ditemukan" };
-  revalidatePath("/dev/admin/donasi/table/review");
+  revalidatePath(RouterAdminDonasi.table_review);
   return {
+    data: data,
     status: 200,
     message: "Status berhasil diganti",
   };

src/app_modules/admin/donasi/fun/update/fun_status_reject.ts

@@ -19,11 +19,22 @@ export async function AdminDonasi_funUpdateStatusReject(
       donasiMaster_StatusDonasiId: statusId,
       catatan: catatan,
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      DonasiMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
 
   if (!data) return { status: 400, message: "Data tidak ditemukan" };
   revalidatePath(RouterAdminDonasi.table_review);
   return {
+    data: data,
     status: 200,
     message: "Status berhasil diganti",
   };

src/app_modules/admin/donasi/fun/update/fun_update_status_dan_total.ts

@@ -30,6 +30,23 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
     data: {
       donasiMaster_StatusInvoiceId: statusInvoiceId,
     },
+    select: {
+      id: true,
+      authorId: true,
+      Donasi: {
+        select: {
+          id: true,
+          title: true,
+          authorId: true,
+          
+        },
+      },
+      DonasiMaster_StatusInvoice: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
   if (!updateInvoice) return { status: 400, message: "Update invoice gagal" };
 
@@ -45,5 +62,5 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
 
   if (!updateDonasi) return { status: 400, message: "Update donasi gagal" };
   revalidatePath(RouterAdminDonasi_OLD.detail_publish + donasiId);
-  return { status: 200, message: "Update Berhasil" };
+  return { data: updateInvoice, status: 200, message: "Update Berhasil" };
 }

src/app_modules/admin/event/fun/edit/fun_edit_status_publish_by_id.ts

@@ -7,7 +7,6 @@ export async function AdminEvent_funEditStatusPublishById(
   eventId: string,
   statusId: string
 ) {
-  console.log(eventId);
   const updt = await prisma.event.update({
     where: {
       id: eventId,
@@ -15,11 +14,22 @@ export async function AdminEvent_funEditStatusPublishById(
     data: {
       eventMaster_StatusId: statusId,
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      EventMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    }
   });
 
   if (!updt) return { status: 400, message: "Update Gagal" };
   revalidatePath("/dev/admin/event/main");
   return {
+    data: updt,
     status: 200,
     message: "Berhasil Update Status",
   };

src/app_modules/admin/event/fun/edit/fun_edit_status_reject_by_id.ts

@@ -14,13 +14,24 @@ export async function AdminEvent_funEditCatatanById(
     },
     data: {
       eventMaster_StatusId: statudId,
-      catatan: data.catatan
+      catatan: data.catatan,
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      EventMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
     },
   });
 
   if (!updt) return { status: 400, message: "Update Gagal" };
   revalidatePath("/dev/admin/event/main");
   return {
+    data: updt,
     status: 200,
     message: "Berhasil Update Status",
   };

src/app_modules/admin/event/fun/get/get_list_table_by_status_id.ts

@@ -11,9 +11,8 @@ export async function AdminEvent_getListTableByStatusId(statudId: string) {
       where: {
         eventMaster_StatusId: "1",
         tanggal: {
-          gte: new Date
-        }
-
+          gte: new Date(),
+        },
       },
       select: {
         id: true,
@@ -52,10 +51,11 @@ export async function AdminEvent_getListTableByStatusId(statudId: string) {
   if (statudId === "2") {
     const getReview = await prisma.event.findMany({
       orderBy: {
-        createdAt: "desc",
+        updatedAt: "desc",
       },
       where: {
         eventMaster_StatusId: "2",
+        active: true,
       },
       select: {
         id: true,

src/app_modules/admin/event/main/index.tsx

@@ -3,18 +3,13 @@
 import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
 
 import {
-  Stack,
-  Title,
-  Divider,
-  SimpleGrid,
-  Paper,
-  Center,
-  Text,
-  Box,
   Group,
-  ActionIcon,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title
 } from "@mantine/core";
-import { IconChevronsRight } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
 

src/app_modules/admin/event/table_status/table_review.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import {
-  ActionIcon,
   Box,
   Button,
   Center,
@@ -11,37 +9,27 @@ import {
   Spoiler,
   Stack,
   Table,
-  Text,
-  TextInput,
   Textarea,
   Title,
 } from "@mantine/core";
-import {
-  IconBan,
-  IconChevronLeft,
-  IconEyeCheck,
-  IconEyeShare,
-  IconShare,
-} from "@tabler/icons-react";
+import { IconBan, IconEyeShare } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
 import { useDisclosure } from "@mantine/hooks";
 
-import { useState } from "react";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import ComponentAdminDonasi_TombolKembali from "../../donasi/component/tombol_kembali";
-import { MODEL_EVENT } from "@/app_modules/event/model/interface";
-import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
-import moment from "moment";
-import _ from "lodash";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { AdminEvent_funEditStatusPublishById } from "../fun/edit/fun_edit_status_publish_by_id";
-import { AdminEvent_getListTableByStatusId } from "../fun/get/get_list_table_by_status_id";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_reject_by_id";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-
+import { MODEL_EVENT } from "@/app_modules/event/model/interface";
+import mqtt_client from "@/util/mqtt_client";
+import _ from "lodash";
+import moment from "moment";
+import { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
+import { AdminEvent_funEditStatusPublishById } from "../fun/edit/fun_edit_status_publish_by_id";
+import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_reject_by_id";
+import { AdminEvent_getListTableByStatusId } from "../fun/get/get_list_table_by_status_id";
 export default function AdminEvent_TableReview({
   listReview,
 }: {
@@ -197,16 +185,35 @@ async function onPublish(eventId: string, setData: any, tanggal: Date) {
       "Waktu acara telah lewat, Report untuk memberitahu user !"
     );
 
-  await AdminEvent_funEditStatusPublishById(eventId, "1").then(async (res) => {
-    if (res.status === 200) {
-      await AdminEvent_getListTableByStatusId("2").then((res) => {
-        setData(res);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil update status");
-      });
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+  const res = await AdminEvent_funEditStatusPublishById(eventId, "1");
+  if (res.status === 200) {
+    const dataNotif = {
+      appId: res.data?.id,
+      status: res.data?.EventMaster_Status?.name as any,
+      userId: res.data?.authorId as any,
+      pesan: res.data?.title as any,
+      kategoriApp: "EVENT",
+      title: "Event publish",
+    };
+
+    const notif = await adminNotifikasi_funCreateToUser({
+      data: dataNotif as any,
+    });
+
+    if (notif.status === 201) {
+      mqtt_client.publish(
+        "USER",
+        JSON.stringify({ userId: res?.data?.authorId, count: 1 })
+      );
     }
-  });
+
+    await AdminEvent_getListTableByStatusId("2").then((res) => {
+      setData(res);
+      ComponentGlobal_NotifikasiBerhasil("Berhasil update status");
+    });
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }
 
 async function onReject(
@@ -222,15 +229,34 @@ async function onReject(
     catatan: catatan,
   };
 
-  await AdminEvent_funEditCatatanById(body as any, "4").then(async (res) => {
-    if (res.status === 200) {
-      await AdminEvent_getListTableByStatusId("2").then((val) => {
-        setData(val);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        close();
-      });
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+  const res  = await AdminEvent_funEditCatatanById(body as any, "4");
+  if (res.status === 200) {
+    const dataNotif = {
+      appId: res.data?.id,
+      status: res.data?.EventMaster_Status?.name as any,
+      userId: res.data?.authorId as any,
+      pesan: res.data?.title as any,
+      kategoriApp: "EVENT",
+      title: "Event anda di tolak !",
+    };
+
+    const notif = await adminNotifikasi_funCreateToUser({
+      data: dataNotif as any,
+    });
+
+    if (notif.status === 201) {
+      mqtt_client.publish(
+        "USER",
+        JSON.stringify({ userId: res?.data?.authorId, count: 1 })
+      );
     }
-  });
+
+    await AdminEvent_getListTableByStatusId("2").then((val) => {
+      setData(val);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      close();
+    });
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }

src/app_modules/admin/layout.tsx

@@ -52,6 +52,8 @@ import adminNotifikasi_funUpdateIsReadById from "./notifikasi/fun/update/fun_upd
 import adminNotifikasi_findRouterJob from "./notifikasi/route_setting/job";
 import adminNotifikasi_findRouterForum from "./notifikasi/route_setting/forum";
 import { adminNotifikasi_findRouterVoting } from "./notifikasi/route_setting/voting";
+import { adminNotifikasi_findRouterEvent } from "./notifikasi/route_setting/event";
+import adminNotifikasi_findRouterDonasi from "./notifikasi/route_setting/donasi";
 
 export default function AdminLayout({
   children,
@@ -428,6 +430,29 @@ function DrawerNotifikasi({
                     },
                   });
 
+                e?.kategoriApp === "EVENT" &&
+                  adminNotifikasi_findRouterEvent({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
+                  e.kategoriApp === "DONASI" && adminNotifikasi_findRouterDonasi({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  })
+
                 const updateIsRead = await adminNotifikasi_funUpdateIsReadById({
                   notifId: e?.id,
                 });

src/app_modules/admin/list_page.tsx

@@ -9,24 +9,20 @@ import { RouterAdminVote } from "@/app/lib/router_admin/router_admin_vote";
 import { RouterAdminUserAccess } from "@/app/lib/router_admin/router_admn_user_acces";
 import { RouterAdminAppInformation } from "@/app/lib/router_admin/router_app_information";
 import {
-  RouterAdminDashboard,
-  RouterAdminDonasi_OLD,
-  RouterAdminInvestasi_OLD,
+  RouterAdminDashboard
 } from "@/app/lib/router_hipmi/router_admin";
 import {
   IconAffiliate,
   IconBriefcase,
   IconDashboard,
   IconDeviceMobile,
-  IconMessages,
-  IconUserCog,
-} from "@tabler/icons-react";
-import {
   IconHeartHandshake,
   IconHome,
+  IconMessages,
   IconMoneybag,
   IconPackageImport,
   IconPresentation,
+  IconUserCog,
 } from "@tabler/icons-react";
 
 export const listAdminPage = [

src/app_modules/admin/notifikasi/route_setting/donasi.ts

@@ -0,0 +1,50 @@
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
+import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
+import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
+import _ from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+export default async function adminNotifikasi_findRouterDonasi({
+  data,
+  router,
+  onChangeNavbar,
+  onToggleNavbar,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onChangeNavbar: (val: any) => void;
+  onToggleNavbar: (val: any) => void;
+}) {
+  if (data.status === "Review") {
+    const path = RouterAdminDonasi.table_review;
+    router.push(path);
+    onChangeNavbar({
+      id: 3,
+      childId: 33,
+    });
+  }
+
+  if (
+    data.status === "Menunggu" ||
+    data.status === "Berhasil" ||
+    data.status === "Proses" ||
+    data.status === "Gagal"
+  ) {
+    const path = RouterAdminDonasi_OLD.detail_publish + data.appId;
+    router.push(path, { scroll: false });
+    onChangeNavbar({
+      id: 3,
+      childId: 32,
+    });
+  }
+
+  //   if (data.status === "Draft") {
+  //     router.push(routeName + "review");
+  //     onChangeNavbar({
+  //       id: 6,
+  //       childId: 63,
+  //     });
+  //   }
+
+  onToggleNavbar(true);
+}

src/app_modules/admin/notifikasi/route_setting/event.ts

@@ -0,0 +1,28 @@
+import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
+import { RouterAdminVote } from "@/app/lib/router_admin/router_admin_vote";
+import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+export async function adminNotifikasi_findRouterEvent({
+  data,
+  router,
+  onChangeNavbar,
+  onToggleNavbar,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onChangeNavbar: (val: any) => void;
+  onToggleNavbar: (val: any) => void;
+}) {
+  const path = RouterAdminEvent.table_review
+
+  if (data.status === "Review") {
+    router.push(path, { scroll: false });
+    onChangeNavbar({
+      id: 4,
+      childId: 43,
+    });
+  }
+
+  onToggleNavbar(true);
+}

src/app_modules/auth/fun/fun_validasi.ts

@@ -18,7 +18,7 @@ export async function auth_funValidasi(nomor: string) {
       id: true,
       nomor: true,
       username: true,
-      masterUserRoleId: true
+      masterUserRoleId: true,
     },
   });
 
@@ -37,13 +37,15 @@ export async function auth_funValidasi(nomor: string) {
     cookies().set({
       name: "ssn",
       value: res,
-      maxAge: 60 * 60 * 24 * 7,
+      maxAge: 60 * 60 * 24 * 30,
     });
 
     revalidatePath(RouterHome.main_home);
   }
 
-
-
-  return { status: 200, message: "Nomor Terverifikasi", role: cek.masterUserRoleId };
+  return {
+    status: 200,
+    message: "Nomor Terverifikasi",
+    role: cek.masterUserRoleId,
+  };
 }

src/app_modules/auth/validasi/view.tsx

@@ -48,7 +48,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
             if (res.role === "1") {
               ComponentGlobal_NotifikasiBerhasil(res.message);
               setLoading(true);
-              router.push(RouterHome.main_home, {scroll: false});
+              router.push(RouterHome.main_home, { scroll: false });
             } else {
               router.push(RouterAdminDashboard.splash_admin);
             }
@@ -102,6 +102,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
               </Text>
               <Center>
                 <PinInput
+                  type={"number"}
                   ref={focusTrapRef}
                   spacing={"md"}
                   mt={"md"}

src/app_modules/colab/component/button/button_update_beranda.tsx

@@ -0,0 +1,45 @@
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Affix, rem, Center, Button } from "@mantine/core";
+import { useState } from "react";
+import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
+
+export function ComponentColab_ButtonUpdateBeranda({
+  onLoad,
+  setIsNewPost,
+}: {
+  onLoad: (val: any) => void;
+  setIsNewPost: any;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onLoadData() {
+    const loadData = await colab_getListAllProyek({ page: 1 });
+    onLoad(loadData);
+    setIsNewPost(false);
+  }
+
+  return (
+    <>
+      <Affix position={{ top: rem(70) }} w={"100%"}>
+        <Center>
+          <Button
+            style={{
+              transition: "0.5s",
+              border: `1px solid ${AccentColor.skyblue}`,
+              backgroundColor: AccentColor.softblue,
+            }}
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            opacity={0.8}
+            onClick={() => {
+              onLoadData();
+            }}
+          >
+            Update Beranda
+          </Button>
+        </Center>
+      </Affix>
+    </>
+  );
+}

src/app_modules/colab/component/detail/header_author_list_partisipan.tsx

@@ -128,7 +128,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
                   radius={"xl"}
                   variant="transparent"
                 >
-                  <IconCaretRight color={opened ? "blue" : "gray"} />
+                  <IconCaretRight color={"white"} />
                 </ActionIcon>
               ) : (
                 ""

src/app_modules/colab/component/detail/list_partisipasi_user.tsx

@@ -19,18 +19,17 @@ import {
   Stack,
   Text,
   Textarea,
-  Title
+  Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 import { useState } from "react";
 import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
 import colab_getListPartisipanByColabId from "../../fun/get/get_list_partisipan_by_id";
-import {
-  MODEL_COLLABORATION_PARTISIPASI
-} from "../../model/interface";
+import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
 import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
-
+import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
+import mqtt_client from "@/util/mqtt_client";
 export default function ComponentColab_DetailListPartisipasiUser({
   listPartisipan,
   userLoginId,
@@ -50,22 +49,43 @@ export default function ComponentColab_DetailListPartisipasiUser({
   const [deskripsi, setDeskripsi] = useState("");
 
   async function onJoin() {
-    await colab_funCreatePartisipan(
+    const res = await colab_funCreatePartisipan(
       colabId as any,
       userLoginId as any,
       deskripsi
-    ).then(async (res) => {
-      if (res.status === 201) {
-        await colab_getListPartisipanByColabId(colabId as any).then((val) => {
-          setApply(true);
-          close();
-          setData(val as any);
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-        });
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+    );
+    if (res.status === 201) {
+      const dataNotif = {
+        appId: res?.data?.ProjectCollaboration?.id,
+        userId: res?.data?.ProjectCollaboration?.userId,
+        pesan: res?.data?.ProjectCollaboration?.title,
+        status: "Partisipan Project",
+        kategoriApp: "COLLABORATION",
+        title: "Partisipan baru telah bergabung !",
+      };
+
+      const createNotifikasi = await notifikasiToUser_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotifikasi.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({
+            userId: dataNotif.userId,
+            count: 1,
+          })
+        );
       }
-    });
+
+      const resList = await colab_getListPartisipanByColabId(colabId as any);
+      setApply(true);
+      close();
+      setData(resList as any);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   return (
@@ -104,7 +124,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
             </ActionIcon>
           </Group>
           <Textarea
-          maxLength={300}
+            maxLength={300}
             label="Deskripsi Diri"
             placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
             minRows={4}
@@ -116,7 +136,10 @@ export default function ComponentColab_DetailListPartisipasiUser({
             {/* <Button radius={"xl"} onClick={() => close()}>
               Batal
             </Button> */}
-            <ComponentGlobal_InputCountDown lengthInput={deskripsi?.length} maxInput={300}/>
+            <ComponentGlobal_InputCountDown
+              lengthInput={deskripsi?.length}
+              maxInput={300}
+            />
             <Button
               disabled={!deskripsi}
               radius={"xl"}
@@ -124,7 +147,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
               bg={MainColor.yellow}
               onClick={() => onJoin()}
               style={{
-                transition: "0.5s"
+                transition: "0.5s",
               }}
             >
               Simpan

src/app_modules/colab/create/index.tsx

@@ -1,29 +1,18 @@
 "use client";
 
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  Button,
-  NumberInput,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Textarea,
-} from "@mantine/core";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import {
-  MODEL_COLLABORATION,
-  MODEL_COLLABORATION_MASTER,
-} from "../model/interface";
-import colab_funCreateProyek from "../fun/create/fun_create_proyek";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import _ from "lodash";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { 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 { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import colab_funCreateProyek from "../fun/create/fun_create_proyek";
+import { MODEL_COLLABORATION_MASTER } from "../model/interface";
 import mqtt_client from "@/util/mqtt_client";
+import { useHookstate } from "@hookstate/core";
+import { useGsCollabCreate } from "../global_state/state";
 
 export default function Colab_Create({
   listIndustri,
@@ -40,7 +29,7 @@ export default function Colab_Create({
   });
   return (
     <>
-      <Stack px={"sm"} py={"md"}>
+      <Stack px={"xl"} py={"md"}>
         <TextInput
           maxLength={100}
           styles={{
@@ -176,7 +165,12 @@ function ButtonAction({ value }: { value: any }) {
   const [loading, setLoading] = useState(false);
 
   async function onSave() {
-    // console.log(value.jumlah_partisipan);
+    mqtt_client.publish(
+      "Colab_create",
+      JSON.stringify({ isNewPost: true, count: 1 })
+    );
+
+    console.log(value.jumlah_partisipan);
     if (value.title === "")
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
     if (value.lokasi === "")
@@ -188,15 +182,6 @@ function ButtonAction({ value }: { value: any }) {
 
     const res = await colab_funCreateProyek(value);
     if (res.status === 201) {
-      //  const dataNotif: any = {
-      //    appId: res.data?.id as any,
-      //    kategoriApp: "VOTING",
-      //    status: create.data?.MasterStatus?.name as any,
-      //    userId: create.data?.authorId as any,
-      //    pesan: create.data?.title as any,
-      //    title: "Job baru",
-      //  };
-
       setLoading(true);
       router.back();
       ComponentGlobal_NotifikasiBerhasil(res.message);
@@ -223,9 +208,12 @@ function ButtonAction({ value }: { value: any }) {
         loading={loading ? true : false}
         mt={"xl"}
         radius={"xl"}
-        onClick={() => onSave()}
+        onClick={() => {
+          onSave();
+        }}
         bg={MainColor.yellow}
         color={"yellow"}
+        c={"black"}
         style={{
           transition: "0.5s",
         }}

src/app_modules/colab/detail/group/index.tsx

@@ -387,35 +387,4 @@ export default function Colab_GroupChatView({
       </Box>
     </>
   );
-
-  // return (
-  //   <Stack bg={"dark"}>
-  //     <Button
-  //       onClick={() => {
-  //         const dd = _.clone(data[0]);
-  //         dd.message = "apa kabar";
-  //         console.log(dd);
-  //         mqtt_client.publish(selectRoom.id, JSON.stringify(dd));
-  //       }}
-  //     >
-  //       kirim pesan
-  //     </Button>
-  //     <div
-  //       ref={ref as any}
-  //       style={{
-  //         overflowY: "auto",
-  //       }}
-  //     >
-  //       {data.map((v, k) => (
-  //         <Stack key={k}>
-  //           <Card withBorder shadow="md" mt={"md"}>
-  //             <Code>
-  //               <pre>{JSON.stringify(v, null, 2)}</pre>
-  //             </Code>
-  //           </Card>
-  //         </Stack>
-  //       ))}
-  //     </div>
-  //   </Stack>
-  // );
 }

src/app_modules/colab/detail/grup/index.tsx

@@ -1,199 +1,347 @@
 "use client";
 
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
-  Affix,
   Box,
   Center,
+  Container,
+  Flex,
   Grid,
   Group,
   Loader,
   Paper,
+  rem,
   Stack,
   Text,
   Textarea,
-  rem
+  Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import {
-  useShallowEffect
-} from "@mantine/hooks";
-import { IconCircle, IconSend } from "@tabler/icons-react";
+  IconChevronLeft,
+  IconCircle,
+  IconInfoSquareRounded,
+  IconSend,
+} from "@tabler/icons-react";
 import _ from "lodash";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import useInfiniteScroll, {
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
 import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
 import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
+import {
+  MODEL_COLLABORATION_MESSAGE,
+  MODEL_COLLABORATION_ROOM_CHAT,
+} from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
 
 export default function Colab_DetailGrupDiskusi({
-  roomId,
-  listMsg,
   userLoginId,
+  listMsg,
+  selectRoom,
+  dataUserLogin,
+  roomId,
 }: {
-  roomId: string;
-  listMsg?: any[];
   userLoginId: string;
+  listMsg: any;
+  selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
+  dataUserLogin: MODEL_USER;
+  roomId: string;
 }) {
   const [msg, setMsg] = useState("");
-  const [data, setData] = useState<any[]>(listMsg as any);
-  const [page, setPage] = useState(1);
+  const [newMessage, setNewMessage] = useState<any>();
+  const [data, setData] = useState<any[]>(listMsg);
+  const [totalPage, setTotalPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [isGet, setIsGet] = useState(true);
+  const [newMessageId, setIdMessage] = useState("");
 
-  // const next = async (direction: ScrollDirection) => {
-  //   try {
-  //     setIsLoading(true);
-  //     await new Promise((a) => setTimeout(a, 100));
+  const [activePage, setActivePage] = useState(1);
 
-  //     setPage(page + 1);
-  //     const newData = await colab_getMessageByRoomId(roomId, page + 1);
-
-  //     console.log(newData);
-
-  //     if (_.isEmpty(newData)) {
-  //       setIsGet(false);
-  //     } else {
-  //       setData((prev) => (direction === "up" ? [...newData, ...prev] : []));
+  // async function onSend() {
+  //   await colab_funCreateMessageByUserId(msg, selectRoom.id).then(
+  //     async (res) => {
+  //       if (res.status === 200) {
+  //         setIdMessage(res.data?.id as any);
+  //         setMsg("");
+  //         const kiriman: MODEL_COLLABORATION_MESSAGE = {
+  //           createdAt: new Date(),
+  //           id: newMessageId,
+  //           isActive: true,
+  //           message: msg,
+  //           isFile: false,
+  //           updatedAt: new Date(),
+  //           userId: dataUserLogin.id,
+  //           User: {
+  //             id: dataUserLogin.id,
+  //             Profile: {
+  //               id: dataUserLogin.Profile?.id as any,
+  //               name: dataUserLogin.Profile?.name as any,
+  //             },
+  //           },
+  //         };
+  //         mqtt_client.publish(selectRoom.id, JSON.stringify(kiriman));
+  //       } else {
+  //         ComponentGlobal_NotifikasiGagal(res.message);
+  //       }
   //     }
-  //   } finally {
-  //     setIsLoading(false);
-  //   }
-  // };
+  //   );
+  // }
 
-  // const ref = useInfiniteScroll({
-  //   next,
-  //   rowCount: data.length,
-  //   hasMore: { up: isGet },
-  //   scrollThreshold: 0.1,
-  //   initialScroll: { top: 100 },
-  // });
+  // useShallowEffect(() => {
+  //   mqtt_client.subscribe(selectRoom.id);
+  //   // mqtt_client.on("message", (topic: any, message: any) => {
+  //   //   onList(message.toString());
+  //   // });
 
-  useShallowEffect(() => {
-    mqtt_client.subscribe(roomId);
+  //   mqtt_client.on("message", (topic: any, message: any) => {
+  //     let dd = _.clone(data);
+  //     const a = [...dd, JSON.parse(message)];
+  //     // console.log(dd.length);
+  //     setData(a);
+  //   });
+  // }, [data]);
 
-    mqtt_client.on("message", (data: any, msg: any) => {
-      onList(setData);
-    });
-  }, [setData]);
-
-  async function onList(setData: any) {
-    await colab_getMessageByRoomId({ page: page, roomId: roomId }).then((val) =>
-      setData(val)
-    );
-  }
-
-  async function onSend() {
-    await colab_funCreateMessageByUserId(msg, roomId).then(async (res) => {
-      if (res.status === 200) {
-        mqtt_client.publish(roomId, msg);
-        setMsg("");
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
-  }
+  // async function onList(message: any) {
+  //   const kiriman: MODEL_COLLABORATION_MESSAGE = {
+  //     createdAt: new Date(),
+  //     id: newMessageId,
+  //     isActive: true,
+  //     message: message,
+  //     isFile: false,
+  //     updatedAt: new Date(),
+  //     userId: dataUserLogin.id,
+  //     User: {
+  //       id: dataUserLogin.id,
+  //       Profile: {
+  //         id: dataUserLogin.Profile?.id as any,
+  //         name: dataUserLogin.Profile?.name as any,
+  //       },
+  //     },
+  //   };
 
+  //   const dataLama = _.clone(data);
+  //   setData([...dataLama, { ...kiriman }]);
 
+  // }
 
   return (
     <>
-      <Box h={"80vh"} bg={"blue.1"}>
-        <Stack justify="flex-end" h={"100%"}>
-          <div
-            style={{
-              // overflow: "scroll",
-              overflowY: "auto",
-              // height: "100vh",
-              // justifyContent: "flex-end",
-              // flexDirection: "column",
-              // display: "flex",
-            }}
-          >
-            {isLoading && (
-              <Center>
-                <Loader size={20} color="gray" />
-              </Center>
-            )}
-            {_.isEmpty(data) ? (
-              <ComponentColab_IsEmptyData text="Belum ada pesan" />
-            ) : (
-              data.map((e, i) => (
-                <Box key={i}>
-                  {userLoginId === e?.User?.id ? (
-                    <Group position="right">
-                      <Paper key={e.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
-                        <Stack spacing={0}>
-                          <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                            {e.User.Profile.name}
-                          </Text>
-                          <div
-                            dangerouslySetInnerHTML={{ __html: e.message }}
-                          />
+      <Box
+        w={"100%"}
+        h={"100%"}
+        style={{
+          overflowY: "auto",
+          overflowX: "auto",
+          backgroundColor: MainColor.black,
+          position: "fixed",
+        }}
+      >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
+          {/* Header */}
+          <HeaderGrup selectRoom={selectRoom} />
 
-                          <Group spacing={"xs"}>
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                timeStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                            <IconCircle size={3} />
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                dateStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                          </Group>
-                        </Stack>
-                      </Paper>
-                    </Group>
-                  ) : (
-                    <Group>
-                      <Paper key={e.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
-                        <Stack spacing={0}>
-                          <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                            {e.User.Profile.name}
-                          </Text>
-                          <div
-                            dangerouslySetInnerHTML={{ __html: e.message }}
-                          />
-                          <Group spacing={"xs"}>
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                timeStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                            <IconCircle size={3} />
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                dateStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                          </Group>
-                        </Stack>
-                      </Paper>
-                    </Group>
+          {/* Main View */}
+          <Box
+            py={"xs"}
+            px={"xs"}
+            pos={"static"}
+            style={{ zIndex: 0 }}
+            h={"82vh"}
+          >
+            {/* Chat View */}
+            {_.isEmpty(data) ? (
+              <ComponentGlobal_IsEmptyData />
+            ) : (
+              // --- Main component --- //
+              <Box bg={"red"}>
+                <ScrollOnly
+                  height="80vh"
+                  renderLoading={() => (
+                    <Center mt={"lg"}>
+                      <Loader color={"yellow"} />
+                    </Center>
                   )}
-                </Box>
-              ))
+                  data={data}
+                  setData={setData}
+                  moreData={async () => {
+                    let loadData = await colab_getMessageByRoomId({
+                      roomId: roomId,
+                      page: 1,
+                    });
+                    setActivePage((val) => val + 1);
+
+                    return loadData;
+                  }}
+                >
+                  {(item) => (
+                    <Flex >{item.message}</Flex>
+                    // <Flex bg={"cyan"} align={"flex-end"}>
+                    //   {userLoginId === item?.User?.id ? (
+                    //     <Group position="right">
+                    //       <Paper
+                    //         key={item?.id}
+                    //         bg={"blue.2"}
+                    //         p={"sm"}
+                    //         mt={"sm"}
+                    //       >
+                    //         <Stack spacing={0}>
+                    //           <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                    //             {item?.User?.Profile?.name}
+                    //           </Text>
+                    //           <div
+                    //             dangerouslySetInnerHTML={{
+                    //               __html: item?.message,
+                    //             }}
+                    //           />
+                    //         </Stack>
+                    //       </Paper>
+                    //     </Group>
+                    //   ) : (
+                    //     <Group>
+                    //       <Paper
+                    //         key={item?.id}
+                    //         bg={"cyan.2"}
+                    //         p={"sm"}
+                    //         mt={"sm"}
+                    //       >
+                    //         <Stack spacing={0}>
+                    //           <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                    //             {item?.User?.Profile?.name}
+                    //           </Text>
+                    //           <div
+                    //             dangerouslySetInnerHTML={{
+                    //               __html: item?.message,
+                    //             }}
+                    //           />
+                    //         </Stack>
+                    //       </Paper>
+                    //     </Group>
+                    //   )}
+                    // </Flex>
+                  )}
+                </ScrollOnly>
+              </Box>
             )}
-            {/* {isLoading && (
+          </Box>
+
+          {/* Footer */}
+          <FooterGrup msg={msg} setMsg={setMsg} />
+        </Container>
+      </Box>
+    </>
+  );
+}
+
+function HeaderGrup({
+  selectRoom,
+}: {
+  selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
+}) {
+  const router = useRouter();
+  const [loadingBack, setLoadingBack] = useState(false);
+  const [loadingInfo, setLoadingInfo] = useState(false);
+  return (
+    <>
+      <Box
+        h={"8vh"}
+        style={{
+          zIndex: 10,
+        }}
+        w={"100%"}
+        pos={"sticky"}
+        top={0}
+        bg={MainColor.darkblue}
+      >
+        <Stack h={"100%"} justify="center" px={"sm"}>
+          <Grid grow gutter={"lg"}>
+            <Grid.Col span={2}>
+              <ActionIcon
+                variant="transparent"
+                radius={"xl"}
+                onClick={() => {
+                  setLoadingBack(true);
+                  router.back();
+                }}
+              >
+                {loadingBack ? (
+                  <ComponentGlobal_Loader />
+                ) : (
+                  <IconChevronLeft color="white" />
+                )}
+              </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={8}>
               <Center>
-                <Loader variant="bars" size={20} color="gray" />
+                <Title c={"white"} order={5} lineClamp={1}>
+                  {selectRoom?.name}
+                </Title>
               </Center>
-            )} */}
-          </div>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Group position="right">
+                <ActionIcon
+                  variant="transparent"
+                  radius={"xl"}
+                  onClick={() => {
+                    setLoadingInfo(true);
+                    router.push(RouterColab.info_grup + selectRoom.id, {
+                      scroll: false,
+                    });
+                  }}
+                >
+                  {loadingInfo ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    <IconInfoSquareRounded color="white" />
+                  )}
+                </ActionIcon>
+              </Group>
+            </Grid.Col>
+          </Grid>
         </Stack>
       </Box>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}
 
-      <Affix
-        bg={"gray.2"}
-        h={"10vh"}
-        position={{ bottom: rem(0) }}
-        w={"100%"}
-        zIndex={99}
-        p={"xs"}
+function FooterGrup({
+  msg,
+  setMsg,
+}: {
+  msg: string;
+  setMsg: (val: any) => any;
+}) {
+  async function onSend() {
+    console.log(msg);
+  }
+  return (
+    <>
+      <Box
+        style={{
+          position: "relative",
+          bottom: 0,
+          height: "10vh",
+          zIndex: 10,
+          // borderRadius: "20px 20px 0px 0px",
+          borderTop: `2px solid ${AccentColor.blue}`,
+          borderRight: `1px solid ${AccentColor.blue}`,
+          borderLeft: `1px solid ${AccentColor.blue}`,
+        }}
+        bg={AccentColor.darkblue}
       >
         <Stack justify="center" h={"100%"} px={"sm"}>
           <Grid align="center">
@@ -210,11 +358,15 @@ export default function Colab_DetailGrupDiskusi({
               <ActionIcon
                 disabled={msg === "" ? true : false}
                 variant="filled"
-                bg={"cyan"}
+                bg={AccentColor.softblue}
+                color={"cyan"}
                 radius={"xl"}
                 size={"xl"}
                 onClick={() => {
-                  onSend();
+                  onSend()
+                }}
+                style={{
+                  transition: "0.5s",
                 }}
               >
                 <IconSend size={20} />
@@ -222,216 +374,7 @@ export default function Colab_DetailGrupDiskusi({
             </Grid.Col>
           </Grid>
         </Stack>
-      </Affix>
+      </Box>
     </>
   );
-
-  // "use client";
-
-  // import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-  // import {
-  //   ActionIcon,
-  //   Box,
-  //   Button,
-  //   Card,
-  //   Center,
-  //   Code,
-  //   Grid,
-  //   Group,
-  //   Header,
-  //   Loader,
-  //   Paper,
-  //   ScrollArea,
-  //   Stack,
-  //   Text,
-  //   Textarea,
-  //   Title,
-  // } from "@mantine/core";
-  // import {
-  //   IconChevronLeft,
-  //   IconCircle,
-  //   IconInfoSquareRounded,
-  //   IconSend,
-  // } from "@tabler/icons-react";
-  // import { useRouter } from "next/navigation";
-  // import router from "next/router";
-  // import { useRef, useState } from "react";
-  // import {
-  //   MODEL_COLLABORATION_MESSAGE,
-  //   MODEL_COLLABORATION_ROOM_CHAT,
-  // } from "../../model/interface";
-  // import _ from "lodash";
-  // import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-  // import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
-  // import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-  // import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
-  // import { useShallowEffect } from "@mantine/hooks";
-  // import mqtt_client from "@/util/mqtt_client";
-  // import useInfiniteScroll, {
-  //   ScrollDirection,
-  // } from "react-easy-infinite-scroll-hook";
-  // import toast from "react-simple-toasts";
-  // import colab_getOneMessageById from "../../fun/get/room_chat/get_one_message_by_id";
-
-  // const list = Array(100).fill(0);
-  // export default function ColabViewChat({
-  //   userLoginId,
-  //   listMsg,
-  //   dataRoom,
-  // }: {
-  //   userLoginId: string;
-  //   listMsg: any;
-  //   dataRoom?: MODEL_COLLABORATION_ROOM_CHAT;
-  // }) {
-  //   // Tamplate app layout
-  //   const router = useRouter();
-  //   const [loadingBack, setLoadingBack] = useState(false);
-  //   const [loadingInfo, setLoadingInfo] = useState(false);
-
-  //   // State message
-  //   const [msg, setMsg] = useState("");
-  //   const [data, setData] = useState(listMsg);
-
-  //   const [ls, setLs] = useState(list);
-
-  //   const viewport = useRef<HTMLDivElement>(null);
-
-  //   const scrollBottom = () => {
-  //     viewport.current?.scrollTo({
-  //       top: viewport.current.scrollHeight,
-  //       behavior: "smooth",
-  //     });
-  //   };
-
-  //   // Kirim pesan
-  //   async function onSend() {
-  //     setMsg("");
-  //     setLs([...[msg], ...ls]);
-  //     scrollBottom();
-  //   }
-
-  //   return (
-  //     <>
-  //       <Box h={"100vh"}>
-  //         {/* Header */}
-
-  //         <Box
-  //           style={{
-  //             zIndex: 99,
-  //           }}
-  //           w={"100%"}
-  //           pos={"fixed"}
-  //           top={0}
-  //           h={"7vh"}
-  //         >
-  //           <Stack bg={"gray.2"} h={"100%"} justify="center" px={"sm"}>
-  //             <Grid grow gutter={"lg"}>
-  //               <Grid.Col span={2}>
-  //                 <ActionIcon
-  //                   loading={loadingBack ? true : false}
-  //                   variant="transparent"
-  //                   radius={"xl"}
-  //                   onClick={() => {
-  //                     setLoadingBack(true);
-  //                     router.back();
-  //                   }}
-  //                 >
-  //                   <IconChevronLeft />
-  //                 </ActionIcon>
-  //               </Grid.Col>
-  //               <Grid.Col span={8}>
-  //                 <Center>
-  //                   <Title order={5} lineClamp={1}>
-  //                     {dataRoom?.name}
-  //                   </Title>
-  //                 </Center>
-  //               </Grid.Col>
-  //               <Grid.Col span={2}>
-  //                 <Group position="right">
-  //                   <ActionIcon
-  //                     loading={loadingInfo ? true : false}
-  //                     variant="transparent"
-  //                     radius={"xl"}
-  //                     onClick={() => {
-  //                       setLoadingInfo(true);
-  //                       router.push(RouterColab.info_grup + dataRoom?.id);
-  //                     }}
-  //                   >
-  //                     <IconInfoSquareRounded />
-  //                   </ActionIcon>
-  //                 </Group>
-  //               </Grid.Col>
-  //             </Grid>
-  //           </Stack>
-  //         </Box>
-
-  //         {/* Main View */}
-
-  //         <Box pos={"static"}>
-  //           <Box
-  //             style={{
-  //               height: "7vh",
-  //             }}
-  //           />
-  //           {/* Chat View */}
-  //           <Box h={"83vh"} bg={"blue"}>
-  //             <ScrollArea h={"100%"} viewportRef={viewport}>
-  //               {ls.map((e, i) => (
-  //                 <Text key={i}>{`${e + 1 + i++}`}</Text>
-  //               ))}
-  //             </ScrollArea>
-  //           </Box>
-
-  //           <Box
-  //             style={{
-  //               height: "10vh",
-  //             }}
-  //           />
-  //         </Box>
-
-  //         {/* Footer */}
-  //         <Box
-  //           style={{
-  //             zIndex: 98,
-  //           }}
-  //           w={"100%"}
-  //           pos={"fixed"}
-  //           bottom={0}
-  //           h={"10vh"}
-  //           bg={"gray.2"}
-  //         >
-  //           <Stack justify="center" h={"100%"} px={"sm"}>
-  //             <Grid align="center">
-  //               <Grid.Col span={"auto"}>
-  //                 <Textarea
-  //                   minRows={1}
-  //                   radius={"md"}
-  //                   placeholder="Ketik pesan anda..."
-  //                   onChange={(val) => {
-  //                     setMsg(val.currentTarget.value);
-  //                   }}
-  //                 />
-  //               </Grid.Col>
-  //               <Grid.Col span={"content"}>
-  //                 <ActionIcon
-  //                   disabled={msg ? false : true}
-  //                   variant="filled"
-  //                   bg={"cyan"}
-  //                   radius={"xl"}
-  //                   size={"xl"}
-  //                   onClick={() => {
-  //                     onSend();
-  //                   }}
-  //                 >
-  //                   <IconSend size={20} />
-  //                 </ActionIcon>
-  //               </Grid.Col>
-  //             </Grid>
-  //           </Stack>
-  //         </Box>
-  //       </Box>
-  //     </>
-  //   );
-  // }
-
 }

src/app_modules/colab/detail/grup/layout.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  ActionIcon,
-  Box,
-  Center,
-  Grid,
-  Group,
-  Header,
-  Stack,
-  Title
-} from "@mantine/core";
-import {
-  IconChevronLeft,
-  IconInfoSquareRounded
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
-
-export default function LayoutColab_DetailGrupDiskusi({
-  children,
-  dataRoom,
-}: {
-  children: React.ReactNode;
-  dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
-}) {
-  const router = useRouter();
-  const [loadingBack, setLoadingBack] = useState(false);
-  const [loadingInfo, setLoadingInfo] = useState(false);
-  return (
-    <>
-      <Box>
-        {/* Header */}
-        <Box
-          style={{
-            zIndex: 99,
-          }}
-          w={"100%"}
-          bg={"black"}
-          pos={"fixed"}
-          top={0}
-          h={50}
-        >
-          {/* <ComponentColab_HeaderTamplate
-            title={dataRoom.name + " " + "fwf wfwe efewf wef"}
-            bg={"gray.2"}
-            icon={<IconInfoSquareRounded />}
-            route2={RouterColab.info_grup + dataRoom?.id}
-          /> */}
-          <Header height={50} sx={{ borderStyle: "none" }} bg={"gray.2"}>
-            <Stack h={50} justify="center" px={"sm"}>
-              <Grid grow gutter={"lg"}>
-                <Grid.Col span={2}>
-                  <ActionIcon
-                    loading={loadingBack ? true : false}
-                    variant="transparent"
-                    radius={"xl"}
-                    onClick={() => {
-                      setLoadingBack(true);
-                      router.back();
-                    }}
-                  >
-                    <IconChevronLeft />
-                  </ActionIcon>
-                </Grid.Col>
-                <Grid.Col span={8}>
-                  <Center>
-                    <Title order={5} lineClamp={1}>
-                      {dataRoom.name}
-                    </Title>
-                  </Center>
-                </Grid.Col>
-                <Grid.Col span={2}>
-                  <Group position="right">
-                    <ActionIcon
-                      loading={loadingInfo ? true : false}
-                      variant="transparent"
-                      radius={"xl"}
-                      onClick={() => {
-                        setLoadingInfo(true);
-                        router.push(RouterColab.info_grup + dataRoom?.id);
-                      }}
-                    >
-                      <IconInfoSquareRounded />
-                    </ActionIcon>
-                  </Group>
-                </Grid.Col>
-              </Grid>
-            </Stack>
-            {/* <Group position="apart" px={"sm"} h={"100%"}>
-              <ActionIcon>
-                <IconChevronLeft />
-              </ActionIcon>
-              <Box w={width > 375 ? 300 : 200}>
-                <Text truncate>ff fsafsdfdaf sadsadf asdfda ewfw wefewf</Text>
-              </Box>
-              <ActionIcon>
-                <IconInfoSquareRounded />
-              </ActionIcon>
-            </Group> */}
-          </Header>
-        </Box>
-
-        {/* Children */}
-        <Box py={"xs"} px={"xs"} pos={"static"}>
-          <Box
-            style={{
-              height: 50,
-            }}
-          ></Box>
-          <Stack>
-            {children}
-            <Box
-              style={{
-                height: "10vh",
-              }}
-            ></Box>
-          </Stack>
-        </Box>
-      </Box>
-    </>
-  );
-}

src/app_modules/colab/detail/proyek/saya/index.tsx

@@ -17,6 +17,7 @@ import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_PARTISIPASI,
 } from "@/app_modules/colab/model/interface";
+import { notifikasiToUser_CreateGroupCollaboration } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_collaboration";
 import {
   ActionIcon,
   Button,
@@ -37,6 +38,8 @@ import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import mqtt_client from "@/util/mqtt_client";
+
 
 export default function Colab_DetailProyekSaya({
   dataColab,
@@ -78,59 +81,6 @@ function CheckBoxPartisipan({
 }) {
   const [value, setValue] = useState<string[]>([]);
 
-  const listCheck = [
-    {
-      id: 1,
-      value: "satu",
-      label: "Satu",
-    },
-    {
-      id: 2,
-      value: "dua",
-      label: "Dua",
-    },
-    {
-      id: 3,
-      value: "tiga",
-      label: "Tiga",
-    },
-    {
-      id: 4,
-      value: "empat",
-      label: "Empat",
-    },
-    {
-      id: 5,
-      value: "lima",
-      label: "Lima",
-    },
-    {
-      id: 6,
-      value: "enam",
-      label: "Enam",
-    },
-    {
-      id: 7,
-      value: "tujuh",
-      label: "Tujuh",
-    },
-    {
-      id: 8,
-      value: "delapan",
-      label: "Delapan",
-    },
-    {
-      id: 9,
-      value: "sembilan",
-      label: "Sembilan",
-    },
-    {
-      id: 10,
-      value: "sepuluh",
-      label: "Sepuluh",
-    },
-  ];
-
   return (
     <>
       <Stack>
@@ -208,17 +158,29 @@ function ButtonAction({
 
   async function onSave() {
     if (nameRoom === "")
-      return ComponentGlobal_NotifikasiPeringatan("Isi Nama Grup");
-    await colab_funCreateRoomChat(nameRoom, value, colabId).then((res) => {
-      if (res.status === 201) {
-        setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
-        setHotMenu(4);
-        router.push(RouterColab.grup_diskusi);
-      } else {
-        ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Nama Grup");
+
+    // await notifikasiToUser_CreateGroupCollaboration({ colabId: colabId });
+
+    const res = await colab_funCreateRoomChat(nameRoom, value, colabId);
+    if (res.status === 201) {
+      for (let a of value) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({
+            userId: a,
+            count: 1,
+          })
+        );
       }
-    });
+
+      setLoading(true);
+      ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
+      setHotMenu(4);
+      router.push(RouterColab.grup_diskusi);
+    } else {
+      ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
+    }
   }
 
   return (
@@ -231,6 +193,7 @@ function ButtonAction({
         }}
         bg={MainColor.yellow}
         color="yellow"
+        c={"black"}
         style={{
           transition: "0.5s",
         }}
@@ -286,6 +249,7 @@ function ButtonAction({
               loading={loading ? true : false}
               radius={"xl"}
               color="yellow"
+              c={"black"}
               bg={MainColor.yellow}
               onClick={() => onSave()}
               style={{

src/app_modules/colab/edit/index.tsx

@@ -1,25 +1,18 @@
 "use client";
 
-import {
-  Stack,
-  TextInput,
-  Select,
-  Textarea,
-  Button,
-  Text,
-} from "@mantine/core";
+import { 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 { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { Button, Select, Stack, Textarea, TextInput } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import { useState } from "react";
+import colab_funEditById from "../fun/edit/fun_edit_by_id";
 import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_MASTER,
 } from "../model/interface";
-import colab_funEditById from "../fun/edit/fun_edit_by_id";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Colab_Edit({
   selectedData,
@@ -31,7 +24,7 @@ export default function Colab_Edit({
   const [value, setValue] = useState(selectedData);
   return (
     <>
-      <Stack px={"sm"} py={"md"}>
+      <Stack px={"xl"} py={"md"}>
         {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
         <TextInput
           maxLength={100}
@@ -217,6 +210,7 @@ function ButtonAction({ value }: { value: any }) {
         onClick={() => onUpdate()}
         bg={MainColor.yellow}
         color={"yellow"}
+        c={"black"}
         style={{
           transition: "0.5s",
         }}

src/app_modules/colab/fun/create/fun_create_partisipan_by_user_id.ts

@@ -13,11 +13,24 @@ export default async function colab_funCreatePartisipan(
     data: {
       projectCollaborationId: colabId,
       userId: userId,
-      deskripsi_diri: deskripsi
+      deskripsi_diri: deskripsi,
+    },
+    select: {
+      ProjectCollaboration: {
+        select: {
+          id: true,
+          title: true,
+          userId: true,
+        },
+      },
     },
   });
 
   if (!create) return { status: 400, message: "Gagal menambahkan partisipan" };
   revalidatePath(RouterColab.main_detail + colabId);
-  return { status: 201, message: "Berhasil menambahkan partisipan" };
-}
+  return {
+    data: create,
+    status: 201,
+    message: "Berhasil menambahkan partisipan",
+  };
+}

src/app_modules/colab/fun/create/fun_create_room_chat.ts

@@ -32,6 +32,20 @@ export default async function colab_funCreateRoomChat(
 
     if (!createAnggota)
       return { status: 400, message: "Gagal Menambah Anggota" };
+
+    const createdNotifikasi = await prisma.notifikasi.create({
+      data: {
+        userId: v,
+        appId: createRoom.id,
+        status: "Collaboration Group",
+        title: "Grup Kolaborasi Baru",
+        pesan: createRoom.name,
+        kategoriApp: "COLLABORATION",
+        userRoleId: "1",
+      },
+    });
+    if (!createdNotifikasi)
+      return { status: 400, message: "Gagal mengirim notifikasi" };
   }
 
   const createForAuthor =

src/app_modules/colab/global_state/state.ts

@@ -0,0 +1,8 @@
+import { hookstate, useHookstate } from "@hookstate/core";
+
+const gs_colab_create = hookstate<boolean>(false);
+export function useGsCollabCreate(){
+    const state = useHookstate(gs_colab_create);
+    const value = state.get();
+    return [value, state.set] as const
+}

src/app_modules/colab/index.ts

@@ -19,7 +19,6 @@ import Colab_DetailPartisipasiProyek from "./detail/proyek/partisipasi";
 import LayoutColab_DetailPartisipasiProyek from "./detail/proyek/partisipasi/layout";
 import Colab_GrupDiskus from "./main/grup";
 import Colab_DetailGrupDiskusi from "./detail/grup";
-import LayoutColab_DetailGrupDiskusi from "./detail/grup/layout";
 import Colab_NotifikasiView from "./main/pemberitahuan";
 import Colab_DetailProyekSaya from "./detail/proyek/saya";
 import LayoutColab_DetailProyekSaya from "./detail/proyek/saya/layout";
@@ -49,7 +48,6 @@ export {
   LayoutColab_DetailPartisipasiProyek,
   Colab_GrupDiskus,
   Colab_DetailGrupDiskusi,
-  LayoutColab_DetailGrupDiskusi,
   Colab_NotifikasiView,
   Colab_DetailProyekSaya,
   LayoutColab_DetailProyekSaya,

src/app_modules/colab/main/beranda.tsx

@@ -1,20 +1,19 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
-import {
-  Box,
-  Center,
-  Loader
-} from "@mantine/core";
+import mqtt_client from "@/util/mqtt_client";
+import { Affix, Box, Button, Center, Loader, rem } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
-import { MODEL_COLLABORATION } from "../model/interface";
 import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
+import { MODEL_COLLABORATION } from "../model/interface";
+import { ComponentColab_ButtonUpdateBeranda } from "../component/button/button_update_beranda";
 
 export default function Colab_Beranda({
   listData,
@@ -26,9 +25,30 @@ export default function Colab_Beranda({
   const [data, setData] = useState(listData);
   const [activePage, setActivePage] = useState(1);
 
+  const [isNewPost, setIsNewPost] = useState(false);
+
+  useShallowEffect(() => {
+    mqtt_client.subscribe("Colab_create");
+
+    mqtt_client.on("message", (topic, message) => {
+      if (topic === "Colab_create") {
+        setIsNewPost(JSON.parse(message.toString()).isNewPost);
+      }
+    });
+  }, []);
+
   return (
     <>
       <Box>
+        {isNewPost && (
+          <ComponentColab_ButtonUpdateBeranda
+            onLoad={(val) => {
+              setData(val);
+            }}
+            setIsNewPost={setIsNewPost}
+          />
+        )}
+
         <ComponentGlobal_CreateButton path={RouterColab.create} />
 
         {_.isEmpty(data) ? (

src/app_modules/colab/main/grup/index.tsx

@@ -1,33 +1,19 @@
 "use client";
 
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import {
   Box,
   Center,
-  Grid,
-  Group,
-  Loader,
-  Paper,
-  Stack,
-  Text,
-  Title,
+  Loader
 } from "@mantine/core";
-import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
-import { IconChevronCompactRight, IconChevronRight } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT,
-  MODEL_COLLABORATION_ROOM_CHAT,
-} from "../../model/interface";
-import { useState } from "react";
 import _ from "lodash";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
-import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { ScrollOnly } from "next-scroll-loader";
-import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
+import { useState } from "react";
+import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
 import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
+import {
+  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT
+} from "../../model/interface";
 
 export default function Colab_GrupDiskus({
   listRoom,

src/app_modules/crowd/main/view.tsx

@@ -106,10 +106,10 @@ export default function MainCrowd() {
               // setLoadingDon(true);
               // router.push(RouterCrowd.donasi);
               // setDonasiHotMenu(0);
-                ComponentGlobal_NotifikasiPeringatan(
-                  "Sementara ini sedang maintenance",
-                  3000
-                );
+              ComponentGlobal_NotifikasiPeringatan(
+                "Sementara ini sedang maintenance",
+                3000
+              );
             }}
           >
             <Grid>

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

@@ -35,11 +35,9 @@ export default function ComponentDonasi_DetailDataGalangDana({
       >
         <Stack>
           <AspectRatio
-            ratio={9 / 16}
+            ratio={1 / 1}
             mx={"sm"}
             mah={300}
-            // bg={"blue"}
-            style={{}}
           >
             <Image
               alt="Foto"

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

@@ -42,14 +42,14 @@ export default function ComponentDonasi_CeritaPenggalangMain({
             <Group position="apart">
               <Text>
                 {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
-                  donasi.createdAt
+                  donasi?.createdAt
                 )}
               </Text>
               <ActionIcon
                 variant="transparent"
                 onClick={() => {
                   setLoading(true);
-                  router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`);
+                  router.push(RouterDonasi.cerita_penggalang + `${donasi?.id}`);
                 }}
               >
                 {isLoading ? (
@@ -63,7 +63,7 @@ export default function ComponentDonasi_CeritaPenggalangMain({
                 )}
               </ActionIcon>
             </Group>
-            <Text lineClamp={4}>{donasi.CeritaDonasi.cerita}</Text>
+            <Text lineClamp={4}>{donasi?.CeritaDonasi.cerita}</Text>
             {/* <Text c={"blue"}>Baca selengkapnya</Text> */}
           </Stack>
         </Paper>

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

@@ -62,23 +62,30 @@ export function ComponentDonasi_DetailDataMain({
         }}
       >
         <Stack>
-          <Center>
+          <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+            <Image
+              alt="Foto"
+              src={RouterDonasi.api_image + `${donasi?.imageDonasi?.url}`}
+              radius={"sm"}
+            />
+          </AspectRatio>
+          {/* <Center>
             <Image
               maw={200}
               radius={"xs"}
               alt="Foto"
-              src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
+              src={RouterDonasi?.api_gambar + `${donasi?.imagesId}`}
             />
-          </Center>
+          </Center> */}
           {/* <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
             </Paper>
           </AspectRatio> */}
           <Stack spacing={0} mt={"lg"}>
-            <Title order={4}>{donasi.title}</Title>
+            <Title order={4}>{donasi?.title}</Title>
             <ComponentDonasi_TampilanHitungMundur
-              durasi={donasi.DonasiMaster_Durasi.name}
-              publishTime={donasi.publishTime}
+              durasi={donasi?.DonasiMaster_Durasi.name}
+              publishTime={donasi?.publishTime}
             />
           </Stack>
           <Stack spacing={0}>
@@ -86,12 +93,12 @@ export function ComponentDonasi_DetailDataMain({
               <Stack spacing={0}>
                 <Text fz={12}>Dana terkumpul</Text>
                 <Title order={4} c="blue">
-                  <TampilanRupiahDonasi nominal={+donasi.terkumpul} />
+                  <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
                 </Title>
                 <Group>
                   <Text fz={10}>Dari total</Text>{" "}
                   <TampilanRupiahDonasi
-                    nominal={+donasi.target}
+                    nominal={+donasi?.target}
                     fontSize={10}
                   />
                 </Group>
@@ -104,12 +111,12 @@ export function ComponentDonasi_DetailDataMain({
                     color: MainColor.yellow,
                   }}
                 >
-                  {donasi.DonasiMaster_Ketegori.name}
+                  {donasi?.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>
             </Group>
           </Stack>
-          <Progress value={+donasi.progres} animate />
+          <Progress value={+donasi?.progres} color="yellow" size={"lg"} />
 
           <Grid>
             <Grid.Col
@@ -145,7 +152,7 @@ export function ComponentDonasi_DetailDataMain({
               span={"auto"}
               onClick={() => {
                 setLoadingKabar(true);
-                router.push(RouterDonasi.kabar + `${donasi.id}`);
+                router.push(RouterDonasi.kabar + `${donasi?.id}`);
               }}
             >
               <Stack spacing={"sm"} align="center">

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

@@ -73,14 +73,15 @@ export default function ComponentDonasi_InformasiPenggalangMain({
             <Group>
               <Avatar radius={"xl"} variant="filled" bg={"blue"}>
                 {(() => {
-                  const usr = author.username;
-                  const splt = usr.split("");
+                  // return null
+                  const usr = author?.username;
+                  const splt = usr?.split("");
                   const Up = _.upperCase(splt[0]);
 
                   return Up;
                 })()}
               </Avatar>
-              <Text>{author.username}</Text>
+              <Text>{author?.username}</Text>
             </Group>
             <ComponentGlobal_BoxInformation
               informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,

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

@@ -6,35 +6,34 @@ import moment from "moment";
 
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useRouter } from "next/navigation";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentDonasi_ListKabar({
   kabar,
-  route
+  route,
 }: {
   kabar: MODEL_DONASI_KABAR;
-  route: string
+  route: string;
 }) {
   const router = useRouter();
   return (
     <>
-      <Paper bg={"gray.1"} p={"md"}>
+      <Paper
+        style={{
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.darkblue}`,
+          padding: "15px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "5px",
+        }}
+        onClick={() => router.push(route + `${kabar.id}`)}
+      >
         <Stack>
           <Text fz={"xs"}>{moment(kabar.createdAt).format("ll")}</Text>
 
-          <Stack>
-            <Title order={5}>{kabar.title}</Title>
-            <Stack spacing={0}>
-              <Text lineClamp={2}>{kabar.deskripsi}</Text>
-              <Text
-                c={"blue"}
-                onClick={() =>
-                  router.push(route + `${kabar.id}`)
-                }
-              >
-                Buka Kabar
-              </Text>
-            </Stack>
-          </Stack>
+          <Title order={5}>{kabar.title}</Title>
         </Stack>
       </Paper>
     </>

src/app_modules/donasi/component/footer_close_donasi.tsx

@@ -3,18 +3,15 @@
 import { Footer, Center, Button } from "@mantine/core";
 import { useRouter } from "next/navigation";
 
-
 export default function FooterDonasi() {
-    const router = useRouter()
+  const router = useRouter();
   return (
     <>
-      <Footer height={70} px={"md"}>
-        <Center h={"100%"}>
-          <Button w={"100%"} radius={"xl"} onClick={() => router.back()}>
-            Tutup
-          </Button>
-        </Center>
-      </Footer>
+      <Center h={"100%"}>
+        <Button w={"80%"} radius={"xl"} onClick={() => router.back()}>
+          Tutup
+        </Button>
+      </Center>
     </>
   );
 }

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -1,11 +1,17 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
   AspectRatio,
   Button,
@@ -23,17 +29,13 @@ import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
-import ComponentDonasi_NotedBox from "../component/noted_box";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
 import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_TEMPORARY } from "../model/interface";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 export default function CreateCeritaPenggalangDonasi({
   dataTemporary,
   userId,
@@ -82,20 +84,41 @@ export default function CreateCeritaPenggalangDonasi({
       },
     };
 
-    await Donasi_funCreate(body as any, gambar).then((res) => {
-      if (res.status === 201) {
+    const res = await Donasi_funCreate(body as any, gambar);
+    if (res.status === 201) {
+      const dataNotif: any = {
+        appId: res.data?.id as any,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Donasi baru",
+      };
+      
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "ADMIN",
+          JSON.stringify({
+            count: 1,
+          })
+        );
         setLoading(true);
-        router.push(RouterDonasi.page_pop_up_create, { scroll: false });
         setTabsPostingDonasi("Review");
         setDonasiHotMenu(1);
-      } else {
-        toast(res.message);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.push(RouterDonasi.main_galang_dana, { scroll: false });
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
   return (
     <>
-      <Stack spacing={50} px={"md"} py={"md"}>
+      <Stack spacing={50} px={"xl"} py={"md"}>
         {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
         <Stack spacing={"sm"}>
           <ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />

src/app_modules/donasi/create/create_donasi.tsx

@@ -26,14 +26,13 @@ import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import _ from "lodash";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import Donasi_funCreateTemporary from "../fun/create/fun_create_donasi_temporary";
 import { gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_ALL_MASTER } from "../model/interface";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 
 export default function CreateDonasi({
   masterKategori,
@@ -87,7 +86,7 @@ export default function CreateDonasi({
 
   return (
     <>
-      <Stack spacing={"md"} px={"xs"}>
+      <Stack spacing={"md"} px={"xl"}>
         <ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
         <Select
           styles={{

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

@@ -9,6 +9,7 @@ import {
   Image,
   Paper,
   Stack,
+  Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
@@ -25,6 +26,13 @@ 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";
 
 export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   const router = useRouter();
@@ -36,21 +44,33 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   });
   return (
     <>
-      <Stack>
-        <ComponentDonasi_NotedBox informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
+      <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"
           onChange={(val) => {
             setKabar({
               ...kabar,
-              judul: val.target.value,
+              judul: _.startCase(val.target.value),
             });
           }}
         />
         <Textarea
+          maxLength={500}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Deskripsi"
           withAsterisk
           placeholder="Masukan deskripsi kabar"
@@ -61,15 +81,36 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
             });
           }}
         />
+        <ComponentGlobal_InputCountDown
+          lengthInput={kabar.deskripsi.length}
+          maxInput={500}
+        />
+
         <Stack>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image
-                alt="Foto"
-                src={imageKabar ? imageKabar : "/aset/no-img.png"}
-              />
-            </Paper>
-          </AspectRatio>
+          {imageKabar ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  alt="Foto"
+                  src={imageKabar ? imageKabar : "/aset/no-img.png"}
+                  maw={300}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <Center>
+              <Text fs={"italic"} fz={10} c={"white"}>
+                Upload gambar kabar !
+              </Text>
+            </Center>
+          )}
           <Center>
             <FileButton
               onChange={async (files: any | null) => {
@@ -91,10 +132,10 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
                 <Button
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
                   leftIcon={<IconCamera />}
-                  compact
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload
                 </Button>
@@ -103,8 +144,15 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           </Center>
         </Stack>
         <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={_.values(kabar).includes("") ? true : false}
           radius={"xl"}
           mt={"lg"}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
           onClick={() => onSave(router, donasiId, kabar, file as any)}
         >
           Simpan
@@ -131,24 +179,17 @@ async function onSave(
     deskripsi: kabar.deskripsi,
   };
 
-  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
+  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);
 
-  await Donasi_funCreateKabar(body as any, gambar).then(async (res) => {
-    if (res.status === 200) {
-      await Donasi_funCreateNotif(body.donasiId, res.kabarId as any).then(
-        (val) => {
-          if (val.status === 200) {
-            ComponentGlobal_NotifikasiBerhasil(res.message);
-            router.back();
-          }
-        }
-      );
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
+  const res = await Donasi_funCreateKabar(body as any, gambar);
+  if (res.status === 200) {
+    // Notif ke setiap donatur
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }

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

@@ -3,6 +3,8 @@
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import React from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutDonasi_CreateKabar({
   children,
@@ -11,9 +13,9 @@ export default function LayoutDonasi_CreateKabar({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Buat Kabar" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Kabar" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,34 +1,13 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  ActionIcon,
-  AspectRatio,
-  Avatar,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Progress,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconClover,
-  IconMessageChatbot,
-  IconMoneybag,
-  IconCircleChevronRight,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
+import { Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
-import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
+import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
 import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
 import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
-import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
+import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailDonasiSaya({
   dataDonasi,
@@ -40,27 +19,32 @@ export default function DetailDonasiSaya({
   const [invoice, setInvoice] = useState(dataDonasi);
   return (
     <>
-      <Stack>
-        <Stack spacing={0}>
+      <Stack pb={"lg"}>
+        <Stack
+          spacing={0}
+          style={{
+            padding: "15px",
+            border: `2px solid ${AccentColor.blue}`,
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            color: "white",
+          }}
+          align={"center"}
+        >
           <Text>Donasi Saya:</Text>
           <Title order={4} c={"blue"}>
-            <TampilanRupiahDonasi nominal={+invoice.nominal} />
+            <TampilanRupiahDonasi nominal={+invoice?.nominal} />
           </Title>
         </Stack>
         <ComponentDonasi_DetailDataMain
-          donasi={invoice.Donasi}
+          donasi={invoice?.Donasi}
           countDonatur={countDonatur}
         />
         <ComponentDonasi_InformasiPenggalangMain
-          author={invoice.Donasi.Author}
+          author={invoice?.Donasi.Author}
         />
-        <ComponentDonasi_CeritaPenggalangMain donasi={invoice.Donasi} />
+        <ComponentDonasi_CeritaPenggalangMain donasi={invoice?.Donasi} />
       </Stack>
     </>
   );
 }
-
-
-
-
-

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

@@ -4,13 +4,15 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"
 import React from "react"
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"
 
 export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
     return<>
-    <AppComponentGlobal_LayoutTamplate
-    header={<ComponentDonasi_HeaderTamplate title="Detail Donasi Saya" route={RouterDonasi.main_donasi_saya} />}
+    <UIGlobal_LayoutTamplate
+    header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi Saya" routerLeft={RouterDonasi.main_donasi_saya} />}
     >
         {children}
-    </AppComponentGlobal_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
     </>
 }

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

@@ -11,9 +11,10 @@ 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 { useState } from "react";
-import { useShallowEffect } from "@mantine/hooks";
-import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
+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";
 
 export default function DetailDraftDonasi({
   dataDonasi,
@@ -52,15 +53,31 @@ function ButtonAjukanPenggalangan({
     gs_donasi_tabs_posting
   );
   async function onCLick() {
-    await Donasi_funGantiStatus(dataDonasi.id, "2").then((res) => {
-      if (res.status === 200) {
-        router.push(RouterDonasi.main_galang_dana);
+    const res = await Donasi_funGantiStatus(dataDonasi.id, "2");
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id as any,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Mengajukan review",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+
         setTabsPostingDonasi("Review");
-        NotifBerhasil("Berhasil Diajukan");
-      } else {
-        NotifPeringatan(res.message);
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan");
+        router.push(RouterDonasi.main_galang_dana);
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiPeringatan(res.message);
+    }
   }
   return (
     <>

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

@@ -15,15 +15,27 @@ import {
 import moment from "moment";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useState } from "react";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailKabarDonasi({dataDonasi}: {dataDonasi: MODEL_DONASI_KABAR}) {
   const [kabar, setKabar] = useState(dataDonasi)
   return (
     <>
-     <Stack>
+      <Stack
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "20px",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
         <Stack>
-          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-          <Title order={5}>{kabar.title}</Title>
+          <Group position="right">
+            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          </Group>
+          <Title align="center" order={4}>{kabar.title}</Title>
           {kabar.imagesId === null ? (
             ""
           ) : (

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

@@ -1,10 +1,9 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { useRouter } from "next/navigation";
 import React from "react";
-import FooterDonasi from "../../component/footer_close_donasi";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutDetailKabarDonasi({
   children,
@@ -14,12 +13,12 @@ export default function LayoutDetailKabarDonasi({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Detail Kabar" hideBack={true} />}
-        footer={<FooterDonasi />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Kabar" />}
+        // footer={<FooterDonasi />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -10,17 +10,19 @@ import React from "react";
 export default function LayoutCeritaPenggalangDonasi({
   children,
   statusDonasiId,
-  donasiId
+  donasiId,
 }: {
   children: React.ReactNode;
   statusDonasiId: string;
-  donasiId: string
+  donasiId: string;
 }) {
   if (statusDonasiId !== "1") {
     return (
       <>
         <UIGlobal_LayoutTamplate
-          header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
+          header={
+            <UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />
+          }
         >
           {children}
         </UIGlobal_LayoutTamplate>
@@ -28,11 +30,11 @@ export default function LayoutCeritaPenggalangDonasi({
     );
   }
   return (
-    <AppComponentGlobal_LayoutTamplate
-      header={<ComponentDonasi_HeaderTamplate title="Cerita Penggalang Dana" />}
-      footer={<ButtonDonasi donasiId={donasiId}/>}
+    <UIGlobal_LayoutTamplate
+      header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
+      footer={<ButtonDonasi donasiId={donasiId} />}
     >
       {children}
-    </AppComponentGlobal_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
   );
 }

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

@@ -1,23 +1,13 @@
 "use client";
 "use dev";
 
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentDonasi_IsEmptyData from "@/app_modules/donasi/component/is_empty_data";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
-import {
-  Avatar,
-  Center,
-  Grid,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconMoodSmile, IconMoodSmileBeam } from "@tabler/icons-react";
-import _, { size } from "lodash";
-import moment from "moment";
+import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { IconMoodSmileBeam } from "@tabler/icons-react";
+import _ from "lodash";
 import { useState } from "react";
 
 export default function DonaturDonasi({
@@ -30,44 +20,45 @@ export default function DonaturDonasi({
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="md"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {donatur.map((e, i) => (
-          <Paper key={i} bg={"gray.1"} p={"sm"}>
-            <Grid>
-              <Grid.Col span={3}>
-                <Center h={"100%"}>
-                  {/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
-                  <IconMoodSmileBeam size={50} />
-                </Center>
-              </Grid.Col>
-              <Grid.Col span={9}>
-                <Stack spacing={0}>
-                  <Title order={5}>{e.Author.username}</Title>
-                  <Group spacing={"xs"}>
-                    <Text fz={"xs"}>Berdonasi sebesar</Text>
-                    <Text truncate fw={"bold"}>
-                      <TampilanRupiahDonasi nominal={+e.nominal} />
-                    </Text>
-                  </Group>
-                  <Text fz={"xs"}>
-                    {new Intl.DateTimeFormat("id-ID", {
-                      dateStyle: "full",
-                    }).format(e?.createdAt)}
+      {donatur.map((e, i) => (
+        <Paper
+          key={i}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "10px",
+          }}
+        >
+          <Grid>
+            <Grid.Col span={3}>
+              <Center h={"100%"}>
+                {/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
+                <IconMoodSmileBeam size={50} />
+              </Center>
+            </Grid.Col>
+            <Grid.Col span={9}>
+              <Stack spacing={0}>
+                <Title order={5}>{e.Author.username}</Title>
+                <Group spacing={"xs"}>
+                  <Text fz={"xs"}>Berdonasi sebesar</Text>
+                  <Text truncate fw={"bold"}>
+                    <TampilanRupiahDonasi nominal={+e.nominal} />
                   </Text>
-                </Stack>
-              </Grid.Col>
-            </Grid>
-          </Paper>
-        ))}
-      </SimpleGrid>
+                </Group>
+                <Text fz={"xs"}>
+                  {new Intl.DateTimeFormat("id-ID", {
+                    dateStyle: "full",
+                  }).format(e?.createdAt)}
+                </Text>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      ))}
     </>
   );
 }

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

@@ -1,8 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+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 ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate";
 
 export default function LayoutDonaturDonasi({
   children,
@@ -11,9 +11,11 @@ export default function LayoutDonaturDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Donatur" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Donatur" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }