Merge pull request #75 from bipproduction/prisma/seeder

Prisma/seeder

package.json

@@ -2,6 +2,9 @@
   "name": "hipmi",
   "version": "0.1.0",
   "private": true,
+  "prisma": {
+    "seed": "npx tsx ./prisma/seed.ts"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",

prisma/seed.ts

@@ -0,0 +1,10 @@
+import prisma from "@/app/lib/prisma";
+import { generate_seeder } from "@/app_modules/_global/fun/generate_seeder";
+
+(async () => {
+  console.log("start");
+  await generate_seeder();
+})().finally(() => {
+  console.log("success");
+  prisma.$disconnect();
+});

src/app/api/seeder/route.ts

@@ -29,6 +29,7 @@ import nomor_admin from "../../../bin/seeder/nomor_admin.json";
 export async function GET(req: Request) {
   const dev = new URL(req.url).searchParams.get("dev");
   if (dev === "DEV-HIPMI") {
+    
     for (let i of userRole) {
       const data = await prisma.masterUserRole.upsert({
         where: {

src/app/dev/crowd/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/donasi/cerita_penggalang/[id]/loading.tsx

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

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

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

src/app/dev/donasi/create/create_donasi/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_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/donasi/detail/detail_draft/[id]/page.tsx

@@ -2,7 +2,8 @@ import { DetailDraftDonasi } from "@/app_modules/donasi";
 import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const dataDonasi = await Donasi_getOneById(params.id);
+  const donasiId = params.id
+  const dataDonasi = await Donasi_getOneById(donasiId);
 
   return (
     <>

src/app/dev/donasi/detail/detail_main/[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]/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_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/donasi/detail/detail_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/donasi/edit/edit_cerita/[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/edit_donasi/[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/edit_rekening/[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/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/donasi/page_pop_up/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/donasi/proses_donasi/invoice/[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/masukan_donasi/[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/metode_pembayaran/[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]/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

@@ -6,7 +6,6 @@ export default async function Page({ params }: { params: { id: string } }) {
   // console.log(params.id)
   const dataInvoice = await Donasi_getOneInvoiceById(params.id);
   const nomorAdmin = await donasi_getMasterNomorAdmin();
-  console.log(nomorAdmin);
 
   return (
     <>

src/app/dev/vote/detail/main/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { Vote_MainDetail } from "@/app_modules/vote";
 import { Vote_cekKontributorById } from "@/app_modules/vote/fun/get/cek_kontributor_by_id";
 import { Vote_getHasilVoteById } from "@/app_modules/vote/fun/get/get_list_hasil_by_id";
@@ -12,7 +13,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   const isKontributor = await Vote_cekKontributorById(voteId);
   const pilihanKontributor = await Vote_getOnePilihanVotingByUserId(voteId);
   const listKontributor = await Vote_getListKontributorById(voteId);
-
+  const userLoginId = await user_getOneUserId();
 
   return (
     <>
@@ -22,6 +23,7 @@ export default async function Page({ params }: { params: { id: string } }) {
         isKontributor={isKontributor}
         pilihanKontributor={pilihanKontributor as any}
         listKontributor={listKontributor as any}
+        userLoginId={userLoginId}
       />
     </>
   );

src/app_modules/_global/fun/generate_seeder.ts

@@ -0,0 +1,408 @@
+import prisma from "@/app/lib/prisma";
+import bidangBisnis from "../../../bin/seeder/bidang_bisnis.json";
+import collaboration_industri from "../../../bin/seeder/colab/master_industri.json";
+import collaboration_status from "../../../bin/seeder/colab/master_status.json";
+import donasi_namaBank from "../../../bin/seeder/donasi/master_bank.json";
+import donasi_durasi from "../../../bin/seeder/donasi/master_durasi.json";
+import donasi_kategori from "../../../bin/seeder/donasi/master_kategori.json";
+import donasi_status from "../../../bin/seeder/donasi/master_status.json";
+import donasi_status_invoice from "../../../bin/seeder/donasi/master_status_invoice.json";
+import event_status from "../../../bin/seeder/event/master_status.json";
+import event_tipe_acara from "../../../bin/seeder/event/master_tipe_acara.json";
+import forum_kategori_report from "../../../bin/seeder/forum/master_report.json";
+import forum_status_posting from "../../../bin/seeder/forum/master_status.json";
+import jenisProgres from "../../../bin/seeder/investasi/master_progres.json";
+import namaBank from "../../../bin/seeder/investasi/nama_bank.json";
+import pembagianDeviden from "../../../bin/seeder/investasi/pembagian_deviden.json";
+import pencarianInvestor from "../../../bin/seeder/investasi/pencarian_investor.json";
+import periodeDeviden from "../../../bin/seeder/investasi/periode_deviden.json";
+import statusInvestasi from "../../../bin/seeder/investasi/status_investasi.json";
+import statusTransaksiInvestasi from "../../../bin/seeder/investasi/status_transaksi_investasi.json";
+import master_status from "../../../bin/seeder/master_status.json";
+import nomor_admin from "../../../bin/seeder/nomor_admin.json";
+import userRole from "../../../bin/seeder/user_role.json";
+import userSeeder from "../../../bin/seeder/user_seeder.json";
+import voting_status from "../../../bin/seeder/voting/master_status.json";
+
+export async function generate_seeder() {
+  for (let i of userRole) {
+    await prisma.masterUserRole.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of userSeeder) {
+    await prisma.user.upsert({
+      where: {
+        nomor: i.nomor,
+      },
+      create: {
+        nomor: i.nomor,
+        username: i.name,
+        masterUserRoleId: i.masterUserRoleId,
+      },
+      update: {
+        nomor: i.nomor,
+        username: i.name,
+        masterUserRoleId: i.masterUserRoleId,
+      },
+    });
+  }
+
+  for (let i of bidangBisnis) {
+    await prisma.masterBidangBisnis.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of pencarianInvestor) {
+    await prisma.masterPencarianInvestor.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of pembagianDeviden) {
+    await prisma.masterPembagianDeviden.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of periodeDeviden) {
+    await prisma.masterPeriodeDeviden.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of statusInvestasi) {
+    await prisma.masterStatusInvestasi.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+      update: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+    });
+  }
+
+  for (let i of namaBank) {
+    await prisma.masterBank.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+        norek: i.norek.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+        norek: i.norek.toString(),
+      },
+    });
+  }
+
+  for (let i of statusTransaksiInvestasi) {
+    await prisma.masterStatusTransaksiInvestasi.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+      update: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+    });
+  }
+
+  for (let i of jenisProgres) {
+    await prisma.masterProgresInvestasi.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+      },
+      update: {
+        name: i.name,
+      },
+    });
+  }
+
+  for (let d of donasi_status) {
+    await prisma.donasiMaster_StatusDonasi.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let d of donasi_kategori) {
+    await prisma.donasiMaster_Kategori.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let d of donasi_durasi) {
+    await prisma.donasiMaster_Durasi.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let i of donasi_namaBank) {
+    await prisma.donasiMaster_Bank.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+        norek: i.norek,
+      },
+      update: {
+        id: i.id,
+        name: i.name,
+        norek: i.norek,
+      },
+    });
+  }
+
+  for (let d of donasi_status_invoice) {
+    await prisma.donasiMaster_StatusInvoice.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let e of event_status) {
+    await prisma.eventMaster_Status.upsert({
+      where: {
+        id: e.id,
+      },
+      create: {
+        id: e.id,
+        name: e.name,
+      },
+      update: {
+        name: e.name,
+      },
+    });
+  }
+
+  for (let e of event_tipe_acara) {
+    await prisma.eventMaster_TipeAcara.upsert({
+      where: {
+        id: e.id,
+      },
+      create: {
+        id: e.id,
+        name: e.name,
+      },
+      update: {
+        name: e.name,
+      },
+    });
+  }
+
+  for (let v of voting_status) {
+    await prisma.voting_Status.upsert({
+      where: {
+        id: v.id,
+      },
+      create: {
+        id: v.id,
+        name: v.name,
+      },
+      update: {
+        name: v.name,
+      },
+    });
+  }
+
+  for (let m of master_status) {
+    await prisma.masterStatus.upsert({
+      where: {
+        id: m.id,
+      },
+      create: {
+        id: m.id,
+        name: m.name,
+      },
+      update: {
+        name: m.name,
+      },
+    });
+  }
+
+  for (let m of forum_kategori_report) {
+    await prisma.forumMaster_KategoriReport.upsert({
+      where: {
+        id: m.id as number,
+      },
+      create: {
+        title: m.title,
+        deskripsi: m.deskripsi,
+      },
+      update: {
+        title: m.title,
+        deskripsi: m.deskripsi,
+      },
+    });
+  }
+
+  for (let s of forum_status_posting) {
+    await prisma.forumMaster_StatusPosting.upsert({
+      where: {
+        id: s.id,
+      },
+      create: {
+        status: s.status,
+      },
+      update: {
+        status: s.status,
+      },
+    });
+  }
+
+  for (let p of collaboration_industri) {
+    await prisma.projectCollaborationMaster_Industri.upsert({
+      where: {
+        id: p.id,
+      },
+      create: {
+        name: p.name,
+      },
+      update: {
+        name: p.name,
+      },
+    });
+  }
+
+  for (let p of collaboration_status) {
+    await prisma.projectCollaborationMaster_Status.upsert({
+      where: {
+        id: p.id,
+      },
+      create: {
+        name: p.name,
+      },
+      update: {
+        name: p.name,
+      },
+    });
+  }
+
+  for (let a of nomor_admin) {
+    await prisma.nomorAdmin.upsert({
+      where: {
+        id: a.id,
+      },
+      create: {
+        id: a.id,
+        nomor: a.nomor,
+      },
+      update: {
+        id: a.id,
+        nomor: a.nomor,
+      },
+    });
+  }
+
+  return { status: 200, success: true };
+}

src/app_modules/_global/notif_global/notifikasi_berhasil.tsx

@@ -21,7 +21,9 @@ export async function ComponentGlobal_NotifikasiBerhasil(
   return notifications.show({
     message: (
       <Center>
-        <Text fw={"bold"}>{text}</Text>
+        <Text align="center" fw={"bold"}>
+          {text}
+        </Text>
       </Center>
     ),
     color: "green",

src/app_modules/_global/notif_global/notifikasi_gagal.tsx

@@ -12,7 +12,7 @@ export async function ComponentGlobal_NotifikasiGagal(text: string) {
   return notifications.show({
     message: (
       <Center>
-        <Text fw={"bold"}>{text}</Text>
+        <Text align="center" fw={"bold"}>{text}</Text>
       </Center>
     ),
     color: "red",

src/app_modules/_global/notif_global/notifikasi_peringatan.tsx

@@ -15,7 +15,9 @@ export async function ComponentGlobal_NotifikasiPeringatan(
   return notifications.show({
     message: (
       <Center>
-        <Text fw={"bold"}>{text}</Text>
+        <Text align="center" fw={"bold"}>
+          {text}
+        </Text>
       </Center>
     ),
     color: "yellow.1",
@@ -24,9 +26,7 @@ export async function ComponentGlobal_NotifikasiPeringatan(
     style: {
       borderWidth: "0.5px",
       borderStyle: "solid",
-      borderColor: "red"
-
-
+      borderColor: "red",
     },
 
     icon: (

src/app_modules/admin/layout.tsx

@@ -51,6 +51,7 @@ import adminNotifikasi_getByUserId from "./notifikasi/fun/get/get_notifikasi_by_
 import adminNotifikasi_funUpdateIsReadById from "./notifikasi/fun/update/fun_update_is_read_by_id";
 import adminNotifikasi_findRouterJob from "./notifikasi/route_setting/job";
 import adminNotifikasi_findRouterForum from "./notifikasi/route_setting/forum";
+import { adminNotifikasi_findRouterVoting } from "./notifikasi/route_setting/voting";
 
 export default function AdminLayout({
   children,
@@ -297,6 +298,7 @@ export default function AdminLayout({
       >
         {children}
       </AppShell>
+
       {/* Drawer Mobile View */}
       <Drawer opened={opened} onClose={() => setOpened(false)} size={"50%"}>
         <Stack spacing={"xl"}>
@@ -389,6 +391,7 @@ function DrawerNotifikasi({
                 },
               }}
               onClick={async () => {
+                // JOB
                 e?.kategoriApp === "JOB" &&
                   adminNotifikasi_findRouterJob({
                     data: e,
@@ -399,6 +402,7 @@ function DrawerNotifikasi({
                     onToggleNavbar: onToggleNavbar,
                   });
 
+                // FORUM
                 e?.kategoriApp === "FORUM" &&
                   adminNotifikasi_findRouterForum({
                     data: e,
@@ -411,6 +415,19 @@ function DrawerNotifikasi({
                     },
                   });
 
+                // VOTE
+                e?.kategoriApp === "VOTING" &&
+                  adminNotifikasi_findRouterVoting({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
                 const updateIsRead = await adminNotifikasi_funUpdateIsReadById({
                   notifId: e?.id,
                 });

src/app_modules/admin/main_dashboard/main/view.tsx

@@ -1,22 +1,14 @@
 "use client";
 
 import {
-  ActionIcon,
-  Box,
-  Center,
   Divider,
   Grid,
   Group,
   Paper,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
-import Admin_Investasi from "../../investasi/main/view";
-import { IconChevronsRight } from "@tabler/icons-react";
-import router from "next/router";
-import * as echarts from 'echarts';
-import EChartsReact from "echarts-for-react";
 
 
 export default function AdminMain({countUser, countPorto}: {countUser: number, countPorto: number} ) {

src/app_modules/admin/notifikasi/fun/get/get_notifikasi_by_user_id.ts

@@ -8,10 +8,14 @@ export default async function adminNotifikasi_getByUserId() {
   const adminId = await user_getOneUserId();
 
   const data = await prisma.notifikasi.findMany({
-   
-    orderBy: {
-      createdAt: "desc",
-    },
+    orderBy: [
+      {
+        isRead: "asc",
+      },
+      {
+        createdAt: "desc",
+      },
+    ],
     where: {
       adminId: adminId,
       userRoleId: "2",

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

@@ -0,0 +1,27 @@
+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_findRouterVoting({
+  data,
+  router,
+  onChangeNavbar,
+  onToggleNavbar,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onChangeNavbar: (val: any) => void;
+  onToggleNavbar: (val: any) => void;
+}) {
+  const path = RouterAdminVote.table_review;
+
+  if (data.status === "Review") {
+    router.push(path, { scroll: false });
+    onChangeNavbar({
+      id: 5,
+      childId: 53,
+    });
+  }
+
+  onToggleNavbar(true);
+}

src/app_modules/admin/vote/child/table_review/index.tsx

@@ -1,19 +1,13 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/component_global/header_tamplate";
-import { AdminEvent_getListPesertaById } from "@/app_modules/admin/event/fun/get/get_list_peserta_by_id";
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
 import {
-  Avatar,
   Box,
   Button,
   Center,
-  Divider,
-  Grid,
   Group,
   Modal,
-  Paper,
   ScrollArea,
   Spoiler,
   Stack,
@@ -23,20 +17,20 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconBan } from "@tabler/icons-react";
-import { IconEyeShare } from "@tabler/icons-react";
+import { IconBan, IconEyeShare } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 
-import { useState } from "react";
-import { AdminVote_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
-import toast from "react-simple-toasts";
-import { AdminVote_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 moment from "moment";
+import { useState } from "react";
+import { AdminVote_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
+import { AdminEvent_funEditCatatanById } from "../../fun/edit/fun_edit_status_reject_by_id";
+import { AdminVote_getListTableByStatusId } from "../../fun/get/get_list_table_by_status_id";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminVote_TableReview({
   listVote,
@@ -255,17 +249,36 @@ async function onPublish(
     return ComponentGlobal_NotifikasiPeringatan("Tanggal Voting Lewat");
 
   setVotingId(voteId);
-  await AdminVote_funEditStatusPublishById(voteId).then(async (res) => {
-    if (res.status === 200) {
-      await AdminVote_getListTableByStatusId("2").then((val) => {
-        setData(val);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        setLoadingPublish(true);
-      });
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+  const res = await AdminVote_funEditStatusPublishById(voteId);
+  if (res.status === 200) {
+    const dataNotif = {
+      appId: res.data?.id,
+      status: res.data?.Voting_Status?.name as any,
+      userId: res.data?.authorId as any,
+      pesan: res.data?.title as any,
+      kategoriApp: "VOTING",
+      title: "Voting 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 AdminVote_getListTableByStatusId("2").then((val) => {
+      setData(val);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      setLoadingPublish(true);
+    });
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }
 
 async function onReject(
@@ -279,16 +292,36 @@ async function onReject(
     id: voteId,
     catatan: catatan,
   };
-  await AdminEvent_funEditCatatanById(data as any).then(async (res) => {
-    if (res.status === 200) {
-      await AdminVote_getListTableByStatusId("2").then((val) => {
-        setData(val);
-        setSaveLoading(true);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        close();
-      });
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+
+  const res = await AdminEvent_funEditCatatanById(data as any);
+  if (res.status === 200) {
+    const dataNotif = {
+      appId: res.data?.id,
+      status: res.data?.Voting_Status?.name as any,
+      userId: res.data?.authorId as any,
+      pesan: res.data?.title as any,
+      kategoriApp: "VOTING",
+      title: "Voting 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 AdminVote_getListTableByStatusId("2").then((val) => {
+      setData(val);
+      setSaveLoading(true);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      close();
+    });
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }

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

@@ -4,20 +4,31 @@ import prisma from "@/app/lib/prisma";
 import { revalidatePath } from "next/cache";
 
 export async function AdminVote_funEditStatusPublishById(voteId: string) {
-
-    const updt = await prisma.voting.update({
-      where: {
-        id: voteId,
+  const updt = await prisma.voting.update({
+    where: {
+      id: voteId,
+    },
+    data: {
+      voting_StatusId: "1",
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      Voting_Status: {
+        select: {
+          name: true,
+        },
       },
-      data: {
-        voting_StatusId: "1",
-      },
-    });
+    },
+  });
 
-    if (!updt) return { status: 400, message: "Update Gagal" };
-    revalidatePath("/dev/admin/vote/main");
-    return {
-      status: 200,
-      message: "Berhasil Update Status",
-    };
+  if (!updt) return { status: 400, message: "Update Gagal" };
+  revalidatePath("/dev/admin/vote/main");
+
+  return {
+    data: updt,
+    status: 200,
+    message: "Berhasil Update Status",
+  };
 }

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

@@ -15,11 +15,22 @@ export async function AdminEvent_funEditCatatanById(
       voting_StatusId: "4",
       catatan: data.catatan,
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      Voting_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/colab/create/index.tsx

@@ -23,6 +23,7 @@ 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 mqtt_client from "@/util/mqtt_client";
 
 export default function Colab_Create({
   listIndustri,
@@ -184,18 +185,24 @@ function ButtonAction({ value }: { value: any }) {
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
     if (value.projectCollaborationMaster_IndustriId === 0)
       return ComponentGlobal_NotifikasiPeringatan("Pilih Industri");
-    // if (value.jumlah_partisipan < 2)
-    //   return ComponentGlobal_NotifikasiPeringatan("Minimal Ada 2 Partisipan");
 
-    await colab_funCreateProyek(value).then((res) => {
-      if (res.status === 201) {
-        setLoading(true);
-        router.back();
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
+    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);
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   // console.log(value);

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

@@ -12,7 +12,7 @@ export default async function colab_funCreateProyek(
 ) {
   const AuthorId = await user_getOneUserId();
 
-  const create = await prisma.projectCollaboration.create({
+  const data = await prisma.projectCollaboration.create({
     data: {
       title: value.title,
       lokasi: value.lokasi,
@@ -25,7 +25,7 @@ export default async function colab_funCreateProyek(
     },
   });
 
-  if (!create) return { status: 400, message: "Gagal Membuat Proyek" };
+  if (!data) return { status: 400, message: "Gagal Membuat Proyek" };
   revalidatePath(RouterColab.beranda);
-  return { status: 201, message: "Berhasil Membuar Proyek" };
+  return { data, status: 201, message: "Berhasil Membuar Proyek" };
 }

src/app_modules/crowd/main/layout.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { useRouter } from "next/navigation";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+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";
 
 export default function LayoutMainCrowd({
@@ -10,19 +10,18 @@ export default function LayoutMainCrowd({
 }: {
   children: React.ReactNode;
 }) {
-  const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
-            route="/dev/home"
-            title="HIPMI Crowd Funding"
+          <UIGlobal_LayoutHeaderTamplate
+            title="Crowd Funding"
+            routerLeft={RouterHome.main_home}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/crowd/main/view.tsx

@@ -1,14 +1,16 @@
 "use client";
 
 import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
-import { Warna } from "@/app/lib/warna";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { gs_donasi_hot_menu } from "@/app_modules/donasi/global_state";
 import { gs_investasiFooter } from "@/app_modules/investasi/g_state";
 import {
   AspectRatio,
-  Button,
-  Center,
-  Flex,
   Grid,
   Image,
   Loader,
@@ -21,7 +23,6 @@ import { IconChevronRight } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 
 export default function MainCrowd() {
   const router = useRouter();
@@ -29,26 +30,46 @@ export default function MainCrowd() {
   const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
   const [loadingInv, setLoadingInv] = useState(false);
   const [loadingDon, setLoadingDon] = useState(false);
+
   return (
     <>
       <Stack>
         <Paper>
-          <AspectRatio ratio={16 / 9}>
+          {/* <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
-              <Image alt="" src={"/aset/investasi/logo-crowd-panjang.png"} />
             </Paper>
-          </AspectRatio>
+          </AspectRatio> */}
+          <Image
+            alt="Logo"
+            src={"/aset/investasi/logo-crowd-panjang.png"}
+            mah={"100%"}
+            styles={{
+              image: {
+                borderRadius: "20px",
+              },
+            }}
+          />
         </Paper>
+
         <Stack>
+          {/* INVESTASI */}
           <Paper
-            shadow="lg"
-            p={"md"}
-            radius={"md"}
-            bg={"teal.4"}
+            style={{
+              cursor: "pointer",
+              padding: "15px",
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              backgroundColor: MainColor.darkblue,
+              color: "white",
+            }}
             onClick={() => {
-              setLoadingInv(true);
-              router.push(RouterCrowd.investasi);
-              setChangeColor(0);
+              // setLoadingInv(true);
+              // router.push(RouterCrowd.investasi);
+              // setChangeColor(0);
+              ComponentGlobal_NotifikasiPeringatan(
+                "Sementara ini sedang maintenance",
+                3000
+              );
             }}
           >
             <Grid>
@@ -61,20 +82,34 @@ export default function MainCrowd() {
               </Grid.Col>
               <Grid.Col span={2}>
                 <Stack h={"100%"} justify="center" align="center">
-                  {loadingInv ? <Loader /> : <IconChevronRight />}
+                  {loadingInv ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    <IconChevronRight />
+                  )}
                 </Stack>
               </Grid.Col>
             </Grid>
           </Paper>
+
+          {/* DONASI */}
           <Paper
-            shadow="lg"
-            bg={"blue.3"}
-            radius={"md"}
-            p={"md"}
+            style={{
+              cursor: "pointer",
+              padding: "15px",
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              backgroundColor: MainColor.darkblue,
+              color: "white",
+            }}
             onClick={() => {
-              setLoadingDon(true);
-              router.push(RouterCrowd.donasi);
-              setDonasiHotMenu(0);
+              // setLoadingDon(true);
+              // router.push(RouterCrowd.donasi);
+              // setDonasiHotMenu(0);
+                ComponentGlobal_NotifikasiPeringatan(
+                  "Sementara ini sedang maintenance",
+                  3000
+                );
             }}
           >
             <Grid>
@@ -87,7 +122,11 @@ export default function MainCrowd() {
               </Grid.Col>
               <Grid.Col span={2}>
                 <Stack h={"100%"} justify="center" align="center">
-                  {loadingDon ? <Loader /> : <IconChevronRight />}
+                  {loadingDon ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    <IconChevronRight />
+                  )}
                 </Stack>
               </Grid.Col>
             </Grid>

src/app_modules/crowd/splash/view.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import { Warna } from "@/app/lib/warna";
-import { Center, Image, Paper, Stack, Text, Title } from "@mantine/core";
+import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
+import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
 import { useShallowEffect } from "@mantine/hooks";
+import { IconHeartHandshake } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
 export default function SplashCrowd() {
   const router = useRouter();
 
   useShallowEffect(() => {
-    setTimeout(() => router.push("/dev/crowd/main"), 1000);
+    setTimeout(() => router.push(RouterCrowd.main), 1000);
   }, []);
   return (
     <>
-      <Center h={"100vh"}>
-        <Paper p={{ base: 50, md: 60, lg: 80 }}>
-          <Image alt="" src={"/aset/investasi/logo-crowd.png"} />
-        </Paper>
-      </Center>
+      <UIGlobal_SplashScreen icon={<IconHeartHandshake size={300} />} />
     </>
   );
 }

src/app_modules/donasi/component/box_publish.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  SimpleGrid,
-  Box,
-  Stack,
-  Grid,
-  AspectRatio,
-  Paper,
-  Progress,
-  Divider,
-  Image,
-  Text,
-} from "@mantine/core";
-import router from "next/router";
-import ComponentDonasi_TampilanHitungMundur from "./tampilan_hitung_mundur";
-import TampilanRupiahDonasi from "./tampilan_rupiah";
-import { MODEL_DONASI } from "../model/interface";
-import { useViewportSize } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import _ from "lodash";
-import ComponentDonasi_IsEmptyData from "./is_empty_data";
-
-export default function ComponentDonasi_BoxPublish({
-  dataDonasi,
-  path,
-}: {
-  dataDonasi: MODEL_DONASI[];
-  path: string;
-}) {
-  const { height, width } = useViewportSize();
-  const router = useRouter();
-  const [donasi, setDonasi] = useState(dataDonasi);
-  return (
-    <>
-      {_.isEmpty(dataDonasi) ? (
-        <ComponentDonasi_IsEmptyData text="Tidak ada data" />
-      ) : (
-        <SimpleGrid
-          cols={4}
-          spacing="lg"
-          breakpoints={[
-            { maxWidth: "62rem", cols: 3, spacing: "md" },
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
-          ]}
-        >
-          {donasi.map((e, i) => (
-            <Box
-              key={i}
-              onClick={() => {
-                router.push(path + `${e.id}`);
-              }}
-            >
-              <Stack>
-                <Grid>
-                  <Grid.Col span={7}>
-                    <AspectRatio ratio={16 / 9}>
-                      <Paper radius={"md"}>
-                        <Image
-                          alt="Foto"
-                          src={RouterDonasi.api_gambar + `${e.imagesId}`}
-                          radius={"md"}
-                        />
-                      </Paper>
-                    </AspectRatio>
-                  </Grid.Col>
-                  <Grid.Col span={5}>
-                    <Stack spacing={"xs"}>
-                      <Stack spacing={0}>
-                        <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                          {e.title}
-                        </Text>
-                        <ComponentDonasi_TampilanHitungMundur
-                          durasi={e.DonasiMaster_Durasi.name}
-                          publishTime={e.publishTime}
-                          textSize={10}
-                        />
-                      </Stack>
-                      <Progress value={+e.progres} color="orange" />
-                      <Stack spacing={0}>
-                        <Text fz={"sm"}>Terkumpul</Text>
-                        <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
-                          <TampilanRupiahDonasi nominal={+e.terkumpul} />
-                        </Text>
-                      </Stack>
-                    </Stack>
-                  </Grid.Col>
-                </Grid>
-                {width > 575 ? "" : <Divider />}
-              </Stack>
-            </Box>
-          ))}
-        </SimpleGrid>
-      )}
-    </>
-  );
-}

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AspectRatio,
+  Box,
+  Grid,
+  Image,
+  Paper,
+  Progress,
+  Stack,
+  Text
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+
+export default function ComponentDonasi_CardPublish({
+  data,
+  path,
+}: {
+  data: any;
+  path: string;
+}) {
+
+  const router = useRouter();
+
+  return (
+    <>
+      <Box
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={() => {
+          router.push(path + `${data.id}`);
+        }}
+      >
+        <Stack>
+          <Grid>
+            <Grid.Col span={7}>
+              <AspectRatio ratio={16 / 9}>
+                <Paper radius={"md"}>
+                  <Image
+                    alt="Foto"
+                    src={RouterDonasi.api_gambar + `${data.imagesId}`}
+                    radius={"xs"}
+                  />
+                </Paper>
+              </AspectRatio>
+            </Grid.Col>
+            <Grid.Col span={5}>
+              <Stack spacing={"xs"}>
+                <Stack spacing={0}>
+                  <Text fz={"sm"} fw={"bold"} lineClamp={2}>
+                    {data.title}
+                  </Text>
+                  <ComponentDonasi_TampilanHitungMundur
+                    durasi={data?.DonasiMaster_Durasi?.name}
+                    publishTime={data.publishTime}
+                    textSize={10}
+                  />
+                </Stack>
+                <Progress value={+data.progres} color="yellow" />
+                <Stack spacing={0}>
+                  <Text fz={"sm"}>Terkumpul</Text>
+                  <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
+                    <TampilanRupiahDonasi nominal={+data.terkumpul} />
+                  </Text>
+                </Stack>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+          {/* {width > 575 ? "" : <Divider />} */}
+        </Stack>
+      </Box>
+    </>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  Box,
+  Stack,
+  Grid,
+  AspectRatio,
+  Paper,
+  Image,
+  Text,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { MODEL_DONASI } from "../../model/interface";
+
+export function ComponentDonasi_CardStatus({
+  data,
+  path,
+}: {
+  data: MODEL_DONASI;
+  path: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Box
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={() => router.push(path + `${data.id}`)}
+      >
+        <Stack>
+          <Grid>
+            <Grid.Col span={7}>
+              <AspectRatio ratio={16 / 9}>
+                <Paper radius={"sm"} bg={"gray.1"}>
+                  <Image
+                    alt="Foto"
+                    src={RouterDonasi.api_gambar + `${data.imagesId}`}
+                    radius={"md"}
+                  />
+                </Paper>
+              </AspectRatio>
+            </Grid.Col>
+            <Grid.Col span={5}>
+              <Stack spacing={"xs"}>
+                <Text fz={"sm"} fw={"bold"} lineClamp={2}>
+                  {data.title}
+                </Text>
+                <Stack spacing={0}>
+                  <Text fz={"sm"}>Terget Dana</Text>
+                  <Text fz={"sm"} fw={"bold"} c={"yellow"} lineClamp={1}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumFractionDigits: 10,
+                    }).format(+data.target)}
+                  </Text>
+                </Stack>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+          {/* {width > 575 ? "" : <Divider />} */}
+        </Stack>
+      </Box>
+    </>
+  );
+}

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

@@ -13,6 +13,7 @@ import {
   Text,
 } from "@mantine/core";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentDonasi_DetailDataGalangDana({
   donasi,
@@ -22,14 +23,30 @@ export default function ComponentDonasi_DetailDataGalangDana({
   const router = useRouter();
   return (
     <>
-      <Stack px={"xs"}>
+      <Stack
+        style={{
+          paddingInline: "15px",
+          paddingBottom: "15px",
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
         <Stack>
-          <Image
-            alt="Foto"
-            src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
-          />
-          {/* <AspectRatio ratio={9 / 16} maw={500} mah={1000} bg={"blue"}>
-          </AspectRatio> */}
+          <AspectRatio
+            ratio={9 / 16}
+            mx={"sm"}
+            mah={300}
+            // bg={"blue"}
+            style={{}}
+          >
+            <Image
+              alt="Foto"
+              src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
+              radius={"sm"}
+            />
+          </AspectRatio>
           <Stack spacing={0}>
             <Title order={4}>{donasi.title}</Title>
             <Text fz={10}>Durasi: {donasi.DonasiMaster_Durasi.name} hari</Text>
@@ -38,13 +55,17 @@ export default function ComponentDonasi_DetailDataGalangDana({
             <Group position="apart">
               <Stack spacing={0}>
                 <Text fz={12}>Dana dibutuhkan</Text>
-                <Title order={4} c="blue">
+                <Title order={4} style={{
+                  color: MainColor.yellow
+                }}>
                   <TampilanRupiahDonasi nominal={+donasi.target} />
                 </Title>
               </Stack>
               <Stack spacing={0}>
                 <Text fz={12}>Kategori</Text>
-                <Title order={4} c="blue">
+                <Title order={4} style={{
+                  color: MainColor.yellow
+                }}>
                   {donasi.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>

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

@@ -7,6 +7,11 @@ import { Stack, Title, Paper, Group, ActionIcon, Text } from "@mantine/core";
 import { IconCircleChevronRight } from "@tabler/icons-react";
 import moment from "moment";
 import { useState } from "react";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export default function ComponentDonasi_CeritaPenggalangMain({
   donasi,
@@ -17,9 +22,22 @@ export default function ComponentDonasi_CeritaPenggalangMain({
   const [isLoading, setLoading] = useState(false);
   return (
     <>
-      <Stack spacing={"xs"}>
+      <Stack
+        spacing={"xs"}
+        style={{
+          color: "white",
+        }}
+      >
         <Title order={4}>Cerita Penggalang Dana</Title>
-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
           <Stack>
             <Group position="apart">
               <Text>
@@ -28,14 +46,21 @@ export default function ComponentDonasi_CeritaPenggalangMain({
                 )}
               </Text>
               <ActionIcon
-                loading={isLoading ? true : false}
                 variant="transparent"
                 onClick={() => {
                   setLoading(true);
                   router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`);
                 }}
               >
-                <IconCircleChevronRight />
+                {isLoading ? (
+                  <ComponentGlobal_Loader />
+                ) : (
+                  <IconCircleChevronRight
+                    style={{
+                      color: MainColor.yellow,
+                    }}
+                  />
+                )}
               </ActionIcon>
             </Group>
             <Text lineClamp={4}>{donasi.CeritaDonasi.cerita}</Text>

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

@@ -30,6 +30,11 @@ import { NotifBerhasil } from "../notifikasi/notif_berhasil";
 import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
 import { useState } from "react";
 import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export function ComponentDonasi_DetailDataMain({
   donasi,
@@ -47,13 +52,20 @@ export function ComponentDonasi_DetailDataMain({
 
   return (
     <>
-      <Stack px={"xs"}>
+      <Stack
+        style={{
+          padding: "15px",
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
         <Stack>
           <Center>
             <Image
-              mah={500}
-              maw={"auto"}
-              radius={"md"}
+              maw={200}
+              radius={"xs"}
               alt="Foto"
               src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
             />
@@ -86,7 +98,12 @@ export function ComponentDonasi_DetailDataMain({
               </Stack>
               <Stack spacing={0}>
                 <Text fz={12}>Kategori</Text>
-                <Title order={4} c="blue">
+                <Title
+                  order={4}
+                  style={{
+                    color: MainColor.yellow,
+                  }}
+                >
                   {donasi.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>
@@ -102,19 +119,25 @@ export function ComponentDonasi_DetailDataMain({
                 router.push(RouterDonasi.donatur + `${donasi.id}`);
               }}
             >
-              <Stack align="center" spacing={"xs"}>
-                <Group>
+              <Stack
+                align="center"
+                spacing={"xs"}
+                style={{
+                  color: MainColor.yellow,
+                }}
+              >
+                <Group align="center" h={"100%"}>
                   {isLoadingDonatur ? (
-                    <Loader size={25} />
+                    <ComponentGlobal_Loader size={25} />
                   ) : (
-                    <IconClover color="skyblue" />
+                    <IconClover />
                   )}
 
-                  <Title order={6} c={"blue"}>
-                    {countDonatur}
-                  </Title>
+                  <Title order={6}>{countDonatur}</Title>
                 </Group>
-                <Text fz={"xs"}>Donatur</Text>
+                <Text fz={"xs"} c={"white"}>
+                  Donatur
+                </Text>
               </Stack>
             </Grid.Col>
             <Divider orientation="vertical" />
@@ -127,9 +150,13 @@ export function ComponentDonasi_DetailDataMain({
             >
               <Stack spacing={"sm"} align="center">
                 {isLoadingKabar ? (
-                  <Loader size={25} />
+                  <ComponentGlobal_Loader size={25} />
                 ) : (
-                  <IconMessageChatbot color="skyblue" />
+                  <IconMessageChatbot
+                    style={{
+                      color: MainColor.yellow,
+                    }}
+                  />
                 )}
                 <Text fz={"xs"}>Kabar Terbaru</Text>
               </Stack>
@@ -144,9 +171,13 @@ export function ComponentDonasi_DetailDataMain({
             >
               <Stack spacing={"sm"} align="center">
                 {isLoadingPencairan ? (
-                  <Loader size={25} />
+                  <ComponentGlobal_Loader size={25} />
                 ) : (
-                  <IconMoneybag color="skyblue" />
+                  <IconMoneybag
+                    style={{
+                      color: MainColor.yellow,
+                    }}
+                  />
                 )}
                 <Text fz={"xs"}>Pencairan Dana</Text>
               </Stack>

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

@@ -16,6 +16,12 @@ import _ from "lodash";
 import { useRouter } from "next/navigation";
 import ComponentDonasi_NotedBox from "../noted_box";
 import { useState } from "react";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 
 export default function ComponentDonasi_InformasiPenggalangMain({
   author,
@@ -27,21 +33,41 @@ export default function ComponentDonasi_InformasiPenggalangMain({
   return (
     <>
       {/* <pre>{JSON.stringify(author, null, 2)}</pre> */}
-      <Stack spacing={"xs"}>
+      <Stack
+        spacing={"xs"}
+        style={{
+          color: "white",
+        }}
+      >
         <Title order={4}>Informasi Penggalang Dana</Title>
-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
           <Stack>
             <Group position="apart">
               <Title order={5}>Penggalang Dana</Title>
               <ActionIcon
-                loading={isLoading ? true : false}
                 variant="transparent"
                 onClick={() => {
                   setLoading(true);
                   router.push(RouterDonasi.penggalang_dana + `${author.id}`);
                 }}
               >
-                <IconCircleChevronRight />
+                {isLoading ? (
+                  <ComponentGlobal_Loader />
+                ) : (
+                  <IconCircleChevronRight
+                    style={{
+                      color: MainColor.yellow,
+                    }}
+                  />
+                )}
               </ActionIcon>
             </Group>
             <Group>
@@ -56,7 +82,7 @@ export default function ComponentDonasi_InformasiPenggalangMain({
               </Avatar>
               <Text>{author.username}</Text>
             </Group>
-            <ComponentDonasi_NotedBox
+            <ComponentGlobal_BoxInformation
               informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
                   kabar penyaluran dapat dilihat di halaman kabar terbaru."
             />

src/app_modules/donasi/component/footer_button_donasi.tsx

@@ -5,6 +5,7 @@ import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { gs_proses_donasi } from "../global_state";
 import { useState } from "react";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
   const router = useRouter();
@@ -24,7 +25,11 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
 
   return (
     <>
-      <Footer height={70} px={"md"} sx={{ borderStyle: "none" }}>
+      <Footer
+        height={70}
+        px={"md"}
+        sx={{ borderStyle: "none", backgroundColor: "transparent" }}
+      >
         <Center h={70}>
           <Button
             loaderPosition="center"
@@ -32,6 +37,9 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
             w={"100%"}
             radius={"xl"}
             onClick={() => onClick()}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
           >
             Donasi
           </Button>

src/app_modules/donasi/component/tampilan_rupiah.tsx

@@ -1,9 +1,21 @@
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import { Text } from "@mantine/core";
 
-export default function TampilanRupiahDonasi({nominal, fontSize}: {nominal: number, fontSize?: number}) {
+export default function TampilanRupiahDonasi({
+  nominal,
+  fontSize,
+}: {
+  nominal: number;
+  fontSize?: number;
+}) {
   return (
     <>
-      <Text fz={ fontSize ? fontSize : "md"}>
+      <Text
+        fz={fontSize ? fontSize : "md"}
+        style={{
+          color: MainColor.yellow,
+        }}
+      >
         Rp.{" "}
         {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
           nominal

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -27,8 +27,13 @@ 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_tabs_posting } from "../global_state";
+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";
 export default function CreateCeritaPenggalangDonasi({
   dataTemporary,
   userId,
@@ -42,6 +47,8 @@ export default function CreateCeritaPenggalangDonasi({
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
+  const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
+
   const [create, setCreate] = useState({
     pembukaan: "",
     cerita: "",
@@ -78,8 +85,9 @@ export default function CreateCeritaPenggalangDonasi({
     await Donasi_funCreate(body as any, gambar).then((res) => {
       if (res.status === 201) {
         setLoading(true);
-        router.push(RouterDonasi.page_pop_up_create);
+        router.push(RouterDonasi.page_pop_up_create, { scroll: false });
         setTabsPostingDonasi("Review");
+        setDonasiHotMenu(1);
       } else {
         toast(res.message);
       }
@@ -87,19 +95,24 @@ export default function CreateCeritaPenggalangDonasi({
   }
   return (
     <>
-      <Stack spacing={50} px={"md"}>
+      <Stack spacing={50} px={"md"} py={"md"}>
         {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
         <Stack spacing={"sm"}>
-          <ComponentDonasi_NotedBox informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
+          <ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
 
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               autosize
               minRows={2}
               maxRows={4}
               withAsterisk
               label="Pembukaan"
-              placeholder="Pembuka dari isi cerita"
+              placeholder="Pembuka cerita"
               maxLength={300}
               onChange={(val) =>
                 setCreate({
@@ -116,6 +129,11 @@ export default function CreateCeritaPenggalangDonasi({
 
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               autosize
               minRows={2}
               maxRows={10}
@@ -158,12 +176,12 @@ export default function CreateCeritaPenggalangDonasi({
               >
                 {(props) => (
                   <Button
-                    compact
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -172,17 +190,25 @@ export default function CreateCeritaPenggalangDonasi({
             </Center>
 
             {imageCerita ? (
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
+              <AspectRatio ratio={1 / 1} mah={300}>
+                <Paper
+                  style={{
+                    border: `2px solid ${AccentColor.blue}`,
+                    backgroundColor: AccentColor.darkblue,
+                    padding: "10px",
+                    borderRadius: "10px",
+                  }}
+                >
                   <Image
                     alt="Foto"
                     src={imageCerita ? imageCerita : "/aset/no-img.png"}
+                    maw={200}
                   />
                 </Paper>
               </AspectRatio>
             ) : (
               <Center>
-                <Text fs={"italic"} fz={10}>
+                <Text fs={"italic"} fz={10} c={"white"}>
                   Upload poster atau gambar penggalangan !
                 </Text>
               </Center>
@@ -191,8 +217,13 @@ export default function CreateCeritaPenggalangDonasi({
         </Stack>
 
         <Stack spacing={"sm"}>
-          <ComponentDonasi_NotedBox informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
+          <ComponentGlobal_BoxInformation informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             placeholder="Contoh: BNI, BCA, MANDIRI, DLL"
             label="Nama Bank"
@@ -205,6 +236,11 @@ export default function CreateCeritaPenggalangDonasi({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             placeholder="Maskuan nomor rekening"
             label="Nomor rekening"
@@ -229,6 +265,9 @@ export default function CreateCeritaPenggalangDonasi({
           w={"100%"}
           radius={"xl"}
           onClick={() => onCreate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Simpan
         </Button>

src/app_modules/donasi/create/create_donasi.tsx

@@ -11,12 +11,17 @@ import {
   Select,
   Stack,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
@@ -24,11 +29,11 @@ import {
 import _ from "lodash";
 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_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,
@@ -75,16 +80,21 @@ export default function CreateDonasi({
         setTabsPostingDonasi("Review");
         router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
       } else {
-        toast(res.message);
+        return ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
 
   return (
     <>
-      <Stack spacing={"md"} px={"md"}>
-        <ComponentDonasi_NotedBox informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
+      <Stack spacing={"md"} px={"xs"}>
+        <ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Kategori"
           placeholder="Pilih kategori penggalangan dana"
           withAsterisk
@@ -102,6 +112,11 @@ export default function CreateDonasi({
 
         <Stack>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Judul Donasi"
             placeholder="Contoh: Renovasi Masjid pada kampung, dll"
@@ -111,6 +126,11 @@ export default function CreateDonasi({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
             withAsterisk
@@ -141,6 +161,11 @@ export default function CreateDonasi({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Durasi"
             placeholder="Jangka waktu penggalangan dana"
             withAsterisk
@@ -175,12 +200,12 @@ export default function CreateDonasi({
             >
               {(props) => (
                 <Button
-                  compact
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
                   leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload
                 </Button>
@@ -188,17 +213,25 @@ export default function CreateDonasi({
             </FileButton>
           </Center>
           {imageDonasi ? (
-            <AspectRatio ratio={1 / 1} onChange={(val) => console.log(val)}>
-              <Paper radius={"sm"} withBorder>
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
                 <Image
                   alt="Foto"
                   src={imageDonasi ? imageDonasi : "/aset/no-img.png"}
+                  maw={200}
                 />
               </Paper>
             </AspectRatio>
           ) : (
             <Center>
-              <Text fs={"italic"} fz={10}>
+              <Text fs={"italic"} fz={10} c={"white"}>
                 Upload poster atau gambar penggalangan !
               </Text>
             </Center>
@@ -216,6 +249,9 @@ export default function CreateDonasi({
           my={"lg"}
           radius={"xl"}
           onClick={() => onCreate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Selanjutnya
         </Button>

src/app_modules/donasi/create/layout.tsx

@@ -1,14 +1,21 @@
-"use client"
+"use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"
-import React from "react"
-import ComponentDonasi_HeaderTamplate from "../component/header_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";
 
-export default function LayoutCreateDonasi({children}: {children: React.ReactNode}){
-    return<>
-    <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Buat Donasi"/>}>
+export default function LayoutCreateDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
+      >
         {children}
-    </AppComponentGlobal_LayoutTamplate>
-    
+      </UIGlobal_LayoutTamplate>
     </>
-}
+  );
+}

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

@@ -1,50 +1,39 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Stack,
-  AspectRatio,
-  Paper,
-  Title,
-  Progress,
-  Grid,
-  Group,
-  Divider,
-  ActionIcon,
-  Avatar,
-  Text,
-  Image,
-  Button,
-} from "@mantine/core";
-import {
-  IconClover,
-  IconMail,
-  IconMoneybag,
-  IconCircleChevronRight,
-  IconMessageChatbot,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
+import { Button, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
+import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
 import { useState } from "react";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { useShallowEffect } from "@mantine/hooks";
-import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
+import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
 
 export default function DetailDraftDonasi({
   dataDonasi,
 }: {
   dataDonasi: MODEL_DONASI;
 }) {
+  // const [data, setData] = useState(dataDonasi);
+
+  // useShallowEffect(() => {
+  //   loadData({ id: dataDonasi.id });
+  // }, [dataDonasi.id]);
+
+  // async function loadData({ id }: { id: string }) {
+  //   const loadData = await Donasi_getOneById(id);
+  //   setData(loadData as any);
+  // }
+
   return (
     <>
-      <Stack spacing={"xl"}>
+      <Stack spacing={"xl"} py={"md"}>
         <ComponentDonasi_DetailDataGalangDana donasi={dataDonasi} />
         <ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
         <ButtonAjukanPenggalangan dataDonasi={dataDonasi} />

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

@@ -2,6 +2,9 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import {
   ActionIcon,
   Button,
@@ -9,12 +12,16 @@ import {
   Header,
   Modal,
   Stack,
-  Title
+  Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { IconTornado } from "@tabler/icons-react";
 import {
   IconChevronLeft,
-  IconEdit
+  IconCreditCard,
+  IconDotsVertical,
+  IconEdit,
+  IconEditCircle,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
@@ -26,85 +33,134 @@ export default function LayoutDetailDraftDonasi({
   children: React.ReactNode;
   donasiId: string;
 }) {
-  const [opened, { open, close }] = useDisclosure(false);
+  const [openDrawer, setOpenDrawer] = useState(false);
   const router = useRouter();
   const [isLoadingDonasi, setLoadingDonasi] = useState(false);
   const [isLoadingCerita, setLoadingCerita] = useState(false);
   const [isLoadingRekening, setLoadingRekening] = useState(false);
 
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Donasi",
+      icon: <IconEdit />,
+      path: RouterDonasi.edit_donasi + donasiId,
+    },
+    {
+      id: "2",
+      name: "Edit Cerita Pengalang",
+      icon: <IconTornado />,
+      path: RouterDonasi.edit_cerita_penggalang + donasiId,
+    },
+    {
+      id: "3",
+      name: "Edit Rekening",
+      icon: <IconCreditCard />,
+      path: RouterDonasi.edit_rekening + donasiId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Draft"
+            customButtonRight={
               <ActionIcon
                 variant="transparent"
-                onClick={() => {
-                  router.back();
-                }}
+                onClick={() => setOpenDrawer(true)}
               >
-                <IconChevronLeft />
+                <IconDotsVertical color="white" />
               </ActionIcon>
-              <Title order={5}>Detail Draft</Title>
-              <ActionIcon variant="transparent" onClick={() => open()}>
-                <IconEdit />
-              </ActionIcon>
-            </Group>
-          </Header>
+            }
+          />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Stack>
-          <Button
-            loaderPosition="center"
-            loading={isLoadingDonasi ? true : false}
-            style={{ transition: "0.5s" }}
-            variant="outline"
-            radius={"xl"}
-            w={"100%"}
-            color="blue"
-            onClick={() => {
-              setLoadingDonasi(true);
-              router.push(RouterDonasi.edit_donasi + `${donasiId}`);
-            }}
-          >
-            Edit Donasi
-          </Button>
-          <Button
-            loaderPosition="center"
-            loading={isLoadingCerita ? true : false}
-            style={{ transition: "0.5s" }}
-            variant="outline"
-            radius={"xl"}
-            w={"100%"}
-            color="teal"
-            onClick={() => {
-              setLoadingCerita(true);
-              router.push(RouterDonasi.edit_cerita_penggalang + `${donasiId}`);
-            }}
-          >
-            Edit Cerita
-          </Button>
-          <Button
-            loaderPosition="center"
-            loading={isLoadingRekening ? true : false}
-            style={{ transition: "0.5s" }}
-            variant="outline"
-            radius={"xl"}
-            w={"100%"}
-            color="orange"
-            onClick={() => {
-              setLoadingRekening(true);
-              router.push(RouterDonasi.edit_rekening + `${donasiId}`);
-            }}
-          >
-            Edit Rekening
-          </Button>
-        </Stack>
-      </Modal>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
+
+  // return (
+  //   <>
+  //     <AppComponentGlobal_LayoutTamplate
+  //       header={
+  //         <Header height={50} sx={{ borderStyle: "none" }}>
+  //           <Group h={50} position="apart" px={"md"}>
+  //             <ActionIcon
+  //               variant="transparent"
+  //               onClick={() => {
+  //                 router.back();
+  //               }}
+  //             >
+  //               <IconChevronLeft />
+  //             </ActionIcon>
+  //             <Title order={5}>Detail Draft</Title>
+  //             <ActionIcon variant="transparent" onClick={() => open()}>
+  //               <IconEdit />
+  //             </ActionIcon>
+  //           </Group>
+  //         </Header>
+  //       }
+  //     >
+  //       {children}
+  //     </AppComponentGlobal_LayoutTamplate>
+  //     <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+  //       <Stack>
+  //         <Button
+  //           loaderPosition="center"
+  //           loading={isLoadingDonasi ? true : false}
+  //           style={{ transition: "0.5s" }}
+  //           variant="outline"
+  //           radius={"xl"}
+  //           w={"100%"}
+  //           color="blue"
+  //           onClick={() => {
+  //             setLoadingDonasi(true);
+  //             router.push(RouterDonasi.edit_donasi + `${donasiId}`);
+  //           }}
+  //         >
+  //           Edit Donasi
+  //         </Button>
+  //         <Button
+  //           loaderPosition="center"
+  //           loading={isLoadingCerita ? true : false}
+  //           style={{ transition: "0.5s" }}
+  //           variant="outline"
+  //           radius={"xl"}
+  //           w={"100%"}
+  //           color="teal"
+  //           onClick={() => {
+  //             setLoadingCerita(true);
+  //             router.push(RouterDonasi.edit_cerita_penggalang + `${donasiId}`);
+  //           }}
+  //         >
+  //           Edit Cerita
+  //         </Button>
+  //         <Button
+  //           loaderPosition="center"
+  //           loading={isLoadingRekening ? true : false}
+  //           style={{ transition: "0.5s" }}
+  //           variant="outline"
+  //           radius={"xl"}
+  //           w={"100%"}
+  //           color="orange"
+  //           onClick={() => {
+  //             setLoadingRekening(true);
+  //             router.push(RouterDonasi.edit_rekening + `${donasiId}`);
+  //           }}
+  //         >
+  //           Edit Rekening
+  //         </Button>
+  //       </Stack>
+  //     </Modal>
+  //   </>
+  // );
 }

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_CERITA_DONASI } from "@/app_modules/donasi/model/interface";
 import { Box, Image, Stack, Text } from "@mantine/core";
 import moment from "moment";
@@ -15,7 +16,16 @@ export default function CeritaPenggalangDonasi({
   return (
     <>
       {/* <pre>{JSON.stringify(data.imageCeritaDonasi, null, 2)}</pre> */}
-      <Stack px={"xs"}>
+      <Stack
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
         <Text>
           {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
             data.createdAt

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

@@ -1,6 +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 ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi";
 import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
 import React from "react";
@@ -17,11 +19,11 @@ export default function LayoutCeritaPenggalangDonasi({
   if (statusDonasiId !== "1") {
     return (
       <>
-        <AppComponentGlobal_LayoutTamplate
-          header={<ComponentDonasi_HeaderTamplate title="Cerita Penggalang Dana" />}
+        <UIGlobal_LayoutTamplate
+          header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
         >
           {children}
-        </AppComponentGlobal_LayoutTamplate>
+        </UIGlobal_LayoutTamplate>
       </>
     );
   }

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

@@ -1,37 +1,12 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  ActionIcon,
-  AspectRatio,
-  Avatar,
-  Badge,
-  Button,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Progress,
-  Stack,
-  Text,
-  Title,
+  Stack
 } from "@mantine/core";
-import {
-  IconCircleChevronRight,
-  IconClover,
-  IconMail,
-  IconMailAi,
-  IconMessageChatbot,
-  IconMoneybag,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
-import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
-import { MODEL_DONASI } from "../../model/interface";
 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 { MODEL_DONASI } from "../../model/interface";
 
 export default function DetailMainDonasi({
   dataDonasi,
@@ -44,7 +19,7 @@ export default function DetailMainDonasi({
 }) {
   return (
     <>
-      <Stack spacing={40}>
+      <Stack spacing={40} py={"md"}>
         <ComponentDonasi_DetailDataMain
           donasi={dataDonasi}
           countDonatur={countDonatur}

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

@@ -1,10 +1,9 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import { Footer, Stack } from "@mantine/core";
+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 ButtonDonasi from "../../component/footer_button_donasi";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutDetailMainDonasi({
   children,
@@ -15,18 +14,12 @@ export default function LayoutDetailMainDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Detail Donasi" />}
-        footer={
-          <Footer height={"10vh"}>
-            <Stack justify="center" h={"100%"}>
-              <ButtonDonasi donasiId={donasiId} />
-            </Stack>
-          </Footer>
-        }
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi" />}
+        footer={<ButtonDonasi donasiId={donasiId} />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import ComponentDonasi_BoxPublish from "@/app_modules/donasi/component/box_publish";
+import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/box_publish";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
   MODEL_DONASI,
@@ -11,7 +11,6 @@ import {
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   AspectRatio,
-  Avatar,
   Box,
   Center,
   Divider,
@@ -23,18 +22,15 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
 import {
   IconBrandGmail,
-  IconHome,
   IconMoodSmile,
-  IconPhone,
-  IconRecordMail,
+  IconPhone
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import router from "next/router";
 import { useState } from "react";
 
 export default function PenggalangDanaDonasi({
@@ -46,12 +42,16 @@ export default function PenggalangDanaDonasi({
 
   return (
     <>
-      <Stack >
+      <Stack>
         <InformasiPenggalang value={value as any} />
-        <ComponentDonasi_BoxPublish
-          dataDonasi={value.Donasi}
-          path={RouterDonasi.detail_publish}
-        />
+        {value.Donasi.map((e, i) => (
+          <Box key={i}>
+            <ComponentDonasi_CardPublish
+              data={e}
+              path={RouterDonasi.detail_publish}
+            />
+          </Box>
+        ))}
       </Stack>
     </>
   );

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

@@ -1,8 +1,7 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
-import { AppShell } from "@mantine/core";
+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";
 
 export default function LayoutPenggalangDanaDonasi({
@@ -12,12 +11,14 @@ export default function LayoutPenggalangDanaDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Informasi Penggalangan Dana" />}
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Informasi Penggalangan Dana" />
+        }
         //   footer={<FooterDonasi />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,33 +1,13 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Stack,
-  AspectRatio,
-  Paper,
-  Title,
-  Progress,
-  Grid,
-  Group,
-  Divider,
-  ActionIcon,
-  Avatar,
-  Text,
-  Image,
+  Stack
 } from "@mantine/core";
-import {
-  IconClover,
-  IconMail,
-  IconMoneybag,
-  IconCircleChevronRight,
-  IconMessageChatbot,
-} from "@tabler/icons-react";
-import { MODEL_DONASI } from "../../model/interface";
 import { useState } from "react";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
 import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
-import _ from "lodash";
 import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
+import { MODEL_DONASI } from "../../model/interface";
 
 export default function DetailPublishDonasi({
   dataPublish,

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

@@ -1,11 +1,18 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
-import React from "react";
+import { ActionIcon, AppShell } from "@mantine/core";
+import React, { useState } from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-import { IconEdit, IconMessageShare } from "@tabler/icons-react";
+import {
+  IconDotsVertical,
+  IconEdit,
+  IconMessageShare,
+} from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 
 export default function LayoutDetailPublishDonasi({
   children,
@@ -14,19 +21,44 @@ export default function LayoutDetailPublishDonasi({
   children: React.ReactNode;
   donasiId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Kabar",
+      icon: <IconMessageShare />,
+      path: RouterDonasi.list_kabar + donasiId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentDonasi_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Publish"
-            icon={<IconMessageShare />}
-            route2={RouterDonasi.list_kabar + `${donasiId}`}
+            // icon={<IconMessageShare />}
+            // route2={RouterDonasi.list_kabar + `${donasiId}`}
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
 }

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

@@ -2,42 +2,28 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Stack,
-  AspectRatio,
-  Paper,
-  Title,
-  Progress,
-  Grid,
-  Group,
-  Divider,
-  ActionIcon,
-  Avatar,
-  Text,
-  Image,
   Button,
-  Spoiler,
+  Group,
   Modal,
+  Paper,
+  Spoiler,
+  Stack,
+  Title,
 } from "@mantine/core";
-import {
-  IconClover,
-  IconMail,
-  IconMoneybag,
-  IconCircleChevronRight,
-  IconMessageChatbot,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
-import { useAtom } from "jotai";
-import { gs_donasi_tabs_posting } from "../../global_state";
 import { useDisclosure } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { MODEL_DONASI } from "../../model/interface";
-import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
+import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
+import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
-import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
 import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
+import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
+import { gs_donasi_tabs_posting } from "../../global_state";
+import { MODEL_DONASI } from "../../model/interface";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 
 export default function DetailRejectDonasi({
   dataReject,
@@ -47,8 +33,8 @@ export default function DetailRejectDonasi({
   const [donasi, setDonasi] = useState(dataReject);
   return (
     <>
-      <Stack spacing={"xl"}>
-        <AlasanPenolakan catatan={donasi.catatan} />
+      <Stack spacing={"xl"} py={"md"}>
+        <ComponentGlobal_BoxInformation isReport informasi={donasi.catatan} />
         <ComponentDonasi_DetailDataGalangDana donasi={donasi} />
         <ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
         <ButtonAction donasiId={donasi.id} />
@@ -79,7 +65,8 @@ function ButtonAction({ donasiId }: { donasiId: string }) {
     gs_donasi_tabs_posting
   );
   const router = useRouter();
-  const [opened, { open, close }] = useDisclosure(false);
+  // const [opened, { open, close }] = useDisclosure(false);
+  const [openModal, setOpenModal] = useState(false);
 
   async function onCLick() {
     await Donasi_funGantiStatus(donasiId, "3").then((res) => {
@@ -105,13 +92,12 @@ function ButtonAction({ donasiId }: { donasiId: string }) {
   }
   return (
     <>
-      <Group position="center">
+      <Group grow>
         <Button
           radius={"xl"}
           bg={"orange"}
           color="orange"
           onClick={() => onCLick()}
-          compact
         >
           Edit Donasi
         </Button>
@@ -119,32 +105,27 @@ function ButtonAction({ donasiId }: { donasiId: string }) {
           radius={"xl"}
           bg={"red"}
           color="red"
-          onClick={() => open()}
-          compact
+          onClick={() => setOpenModal(true)}
         >
           Hapus Donasi
         </Button>
       </Group>
-      <Modal
-        opened={opened}
-        onClose={close}
-        centered
-        title="Yakin menghapus Penggalanagn Dana ini ?"
-      >
-        <Group position="center">
-          <Button radius={"xl"} variant="outline" onClick={close}>
+
+      <UIGlobal_Modal
+        title={"Anda yakin ingin menghapus donasi ini ?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
             Batal
           </Button>
-          <Button
-            radius={"xl"}
-            variant="outline"
-            color="red"
-            onClick={() => onDelete()}
-          >
+        }
+        buttonKanan={
+          <Button radius={"xl"} color="red" onClick={() => onDelete()}>
             Hapus
           </Button>
-        </Group>
-      </Modal>
+        }
+      />
     </>
   );
 }

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

@@ -1,23 +1,21 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+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";
-import { IconEdit, IconMessageShare } from "@tabler/icons-react";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
-export default  function LayoutDetailRejectDonasi({
+export default function LayoutDetailRejectDonasi({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Detail Reject"  />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -2,39 +2,20 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Stack,
-  AspectRatio,
-  Paper,
-  Title,
-  Progress,
-  Grid,
-  Group,
-  Divider,
-  ActionIcon,
-  Avatar,
-  Text,
-  Image,
   Button,
+  Stack
 } from "@mantine/core";
-import {
-  IconClover,
-  IconMail,
-  IconMoneybag,
-  IconCircleChevronRight,
-  IconMessageChatbot,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
 import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
+import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import { useState } from "react";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailReviewDonasi({
   dataDonasi,
@@ -45,7 +26,7 @@ export default function DetailReviewDonasi({
 
   return (
     <>
-      <Stack spacing={"xl"}>
+      <Stack spacing={"xl"} py={"md"}>
         <ComponentDonasi_DetailDataGalangDana donasi={donasi} />
         <ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
         <ButtonBatalReview donasi={donasi} />
@@ -81,8 +62,8 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
         loaderPosition="center"
         loading={isLoading ? true : false}
         radius={"xl"}
-        bg={"red"}
-        color="red"
+        bg={"orange"}
+        color="orange"
         onClick={() => onCLick()}
       >
         Batalkan Review

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

@@ -1,11 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+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";
-import { IconEdit, IconMessageShare } from "@tabler/icons-react";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default  function LayoutDetailReviewDonasi({
   children,
@@ -15,9 +12,9 @@ export default  function LayoutDetailReviewDonasi({
   
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Detail Review"  />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Review"  />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -27,6 +27,11 @@ import {
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 
 export default function EditCeritaPenggalangDonasi({
   dataCerita,
@@ -46,29 +51,49 @@ export default function EditCeritaPenggalangDonasi({
   return (
     <>
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
-      <Stack spacing={"md"} px={"md"}>
-        <Textarea
-          autosize
-          minRows={2}
-          maxRows={7}
-          withAsterisk
-          label="Pembukaan"
-          placeholder="Pembuka dari isi cerita"
-          value={value.pembukaan}
-          error={
-            value.pembukaan === "" ? (
-              <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
-            ) : (
-              ""
-            )
-          }
-          onChange={(val) =>
-            setValue({
-              ...value,
-              pembukaan: val.target.value,
-            })
-          }
-        />
+      <Stack
+        spacing={"md"}
+        style={{
+          padding: "15px",
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            autosize
+            minRows={2}
+            maxRows={7}
+            withAsterisk
+            label="Pembukaan"
+            placeholder="Pembuka dari isi cerita"
+            value={value.pembukaan}
+            error={
+              value.pembukaan === "" ? (
+                <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
+              ) : (
+                ""
+              )
+            }
+            onChange={(val) =>
+              setValue({
+                ...value,
+                pembukaan: val.target.value,
+              })
+            }
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.pembukaan.length}
+            maxInput={300}
+          />
+        </Stack>
 
         <Stack spacing={"lg"}>
           <Center>
@@ -93,20 +118,27 @@ export default function EditCeritaPenggalangDonasi({
             >
               {(props) => (
                 <Button
-                  compact
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
                   leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload
                 </Button>
               )}
             </FileButton>
           </Center>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Paper
+              style={{
+                border: `2px solid ${AccentColor.blue}`,
+                backgroundColor: AccentColor.darkblue,
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
               <Image
                 alt="Foto"
                 src={
@@ -115,33 +147,45 @@ export default function EditCeritaPenggalangDonasi({
                     : RouterDonasi.api_image_cerita +
                       value.imageCeritaDonasi.url
                 }
+                maw={200}
               />
             </Paper>
           </AspectRatio>
         </Stack>
 
-        <Textarea
-          autosize
-          minRows={2}
-          maxRows={7}
-          withAsterisk
-          label="Cerita"
-          placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
-          value={value.cerita}
-          error={
-            value.cerita === "" ? (
-              <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
-            ) : (
-              ""
-            )
-          }
-          onChange={(val) =>
-            setValue({
-              ...value,
-              cerita: val.target.value,
-            })
-          }
-        />
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            autosize
+            minRows={2}
+            maxRows={7}
+            withAsterisk
+            label="Cerita"
+            placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+            value={value.cerita}
+            error={
+              value.cerita === "" ? (
+                <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
+              ) : (
+                ""
+              )
+            }
+            onChange={(val) =>
+              setValue({
+                ...value,
+                cerita: val.target.value,
+              })
+            }
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.cerita.length}
+            maxInput={300}
+          />
+        </Stack>
 
         <Button
           style={{
@@ -155,6 +199,9 @@ export default function EditCeritaPenggalangDonasi({
           w={"100%"}
           radius={"xl"}
           onClick={() => onUpdate(router, value, file as any)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Update
         </Button>

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

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutEditCeritaPenggalangDonasi({
   children,
@@ -12,9 +14,9 @@ export default function LayoutEditCeritaPenggalangDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Update Cerita Penggalang" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Update Cerita Penggalang" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,39 +1,35 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Stack,
-  Select,
-  AspectRatio,
-  Paper,
-  Center,
-  Button,
-  TextInput,
-  Image,
-  FileButton,
-  Modal,
-  Group,
-  Title,
-  Text,
-} from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { gs_donasi_tabs_posting } from "../../global_state";
-import toast from "react-simple-toasts";
-import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
-import { useState } from "react";
-import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
-import { useDisclosure } from "@mantine/hooks";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import _ from "lodash";
-import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
+import { gs_donasi_tabs_posting } from "../../global_state";
+import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function EditDonasi({
   dataDonasi,
@@ -62,6 +58,11 @@ export default function EditDonasi({
       {/* <pre>{JSON.stringify(donasi, null, 2)}</pre> */}
       <Stack spacing={"md"} px={"md"}>
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Kategori"
           placeholder="Pilih kategori penggalangan dana"
           value={value.DonasiMaster_Ketegori.id}
@@ -80,8 +81,15 @@ export default function EditDonasi({
           }
         />
         <Stack>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Paper
+              style={{
+                border: `2px solid ${AccentColor.blue}`,
+                backgroundColor: AccentColor.darkblue,
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
               <Image
                 alt="Foto"
                 src={
@@ -89,6 +97,7 @@ export default function EditDonasi({
                     ? updateImage
                     : RouterDonasi.api_gambar + `${value.imagesId}`
                 }
+                maw={200}
               />
             </Paper>
           </AspectRatio>
@@ -114,12 +123,12 @@ export default function EditDonasi({
             >
               {(props) => (
                 <Button
-                  compact
                   {...props}
                   radius={"xl"}
-                  variant="outline"
                   leftIcon={<IconCamera />}
-                  w={150}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload
                 </Button>
@@ -129,6 +138,11 @@ export default function EditDonasi({
         </Stack>
         <Stack>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Judul Donasi"
             placeholder="Contoh: Renovasi Masjid pada kampung, dll"
@@ -149,6 +163,11 @@ export default function EditDonasi({
             }
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
             withAsterisk
@@ -184,6 +203,11 @@ export default function EditDonasi({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Durasi"
             placeholder="Jangka waktu penggalangan dana"
             withAsterisk
@@ -214,6 +238,9 @@ export default function EditDonasi({
           onClick={() => {
             onUpdate(value, file as any, router);
           }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Update
         </Button>

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+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";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutEditDonasi({
   children,
@@ -12,9 +11,9 @@ export default function LayoutEditDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Edit Donasi" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Donasi" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -10,6 +10,7 @@ import { Donasi_funUpdateRekening } from "../../fun/update/fun_update_rekening";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Donasi_EditRekening({
   dataDonasi,
@@ -25,6 +26,11 @@ export default function Donasi_EditRekening({
       <Stack spacing={"xl"}>
         <Stack spacing={"sm"}>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Nama Bank"
             placeholder="Masukan Nama Bank"
@@ -44,6 +50,11 @@ export default function Donasi_EditRekening({
             }
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             type="number"
             label="Nomor Rekening"
@@ -75,6 +86,9 @@ export default function Donasi_EditRekening({
           }
           radius={"xl"}
           onClick={() => onUpdate(router, donasi, setLoading)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Update
         </Button>

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

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutDonasi_EditRekening({
   children,
@@ -12,11 +14,11 @@ export default function LayoutDonasi_EditRekening({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Edit Rekening" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Rekening" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -20,18 +20,12 @@ export async function Donasi_funCreate(req: MODEL_DONASI, file: FormData) {
       imagesId: body.imagesId,
       authorId: body.authorId,
       namaBank: body.namaBank,
-      rekening: body.rekening
+      rekening: body.rekening,
     },
   });
 
   if (!dataDonasi) return { status: 400, message: "Gagal disimpan" };
-  await Donasi_funDeleteTemporaryCreate(body.id).then((res) => {
-    if (res.status === 200) {
-      console.log(res.message);
-    } else {
-      console.log(res.message);
-    }
-  });
+  await Donasi_funDeleteTemporaryCreate(body.id);
 
   const dataImage: any = file.get("file");
   const fileName = dataImage.name;

src/app_modules/donasi/index.ts

@@ -1,6 +1,6 @@
 import MainDonasi from "./main/beranda";
 import LayoutDonasi from "./main/layout";
-import GalangDanaDonasi from "./main/galang_dana";
+import GalangDanaDonasi from "./main/galang_dana/ui_galang_dana";
 import DonasiSayaDonasi from "./main/donasi_saya";
 import CreateDonasi from "./create/create_donasi";
 import LayoutCreateDonasi from "./create/layout";

src/app_modules/donasi/main/beranda.tsx

@@ -1,73 +1,41 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { Warna } from "@/app/lib/warna";
-import {
-  ActionIcon,
-  Affix,
-  AspectRatio,
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Card,
-  CardSection,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Progress,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-  rem,
-} from "@mantine/core";
-import { useViewportSize, useWindowScroll } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import { MODEL_DONASI } from "../model/interface";
-import { useState } from "react";
-import ComponentDonasi_BoxPublish from "../component/box_publish";
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { ActionIcon, Affix, Box, rem } from "@mantine/core";
+import { useWindowScroll } from "@mantine/hooks";
 import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentDonasi_CardPublish from "../component/card_view/box_publish";
+import { MODEL_DONASI } from "../model/interface";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import _ from "lodash";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function MainDonasi({
   listDonasi,
 }: {
   listDonasi: MODEL_DONASI[];
 }) {
-  const router = useRouter();
-  const [isLoading, setLoading] = useState(false);
-  const [scroll, scrollTo] = useWindowScroll();
+  const [data, setData] = useState(listDonasi);
 
   return (
     <>
-      <Affix position={{ bottom: rem(150), right: rem(30) }}>
-        <ActionIcon
-          loading={isLoading ? true : false}
-          opacity={scroll.y > 0 ? 0.5 : ""}
-          style={{
-            transition: "0.5s",
-          }}
-          size={"xl"}
-          radius={"xl"}
-          variant="transparent"
-          bg={"orange"}
-          onClick={() => {
-            setLoading(true);
-            router.push(RouterDonasi.create_donasi);
-          }}
-        >
-          <IconPencilPlus color="white" />
-        </ActionIcon>
-      </Affix>
-
-      <ComponentDonasi_BoxPublish
-        dataDonasi={listDonasi}
-        path={RouterDonasi.detail_main}
-      />
+      <Box>
+        <ComponentGlobal_CreateButton path={RouterDonasi.create_donasi} />
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          data.map((e, i) => (
+            <Box key={i}>
+              <ComponentDonasi_CardPublish
+                data={e as any}
+                path={RouterDonasi.detail_main}
+              />
+            </Box>
+          ))
+        )}
+      </Box>
     </>
   );
 }

src/app_modules/donasi/main/donasi_saya.tsx

@@ -1,36 +1,30 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import {
   AspectRatio,
-  Avatar,
   Badge,
   Box,
-  Button,
-  Card,
-  Center,
-  Divider,
   Grid,
   Group,
   Image,
   Paper,
   Progress,
-  SimpleGrid,
   Stack,
-  Text,
-  Title,
+  Text
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import { MODEL_DONASI_INVOICE } from "../model/interface";
-import { useState } from "react";
-import TampilanRupiahDonasi from "../component/tampilan_rupiah";
-import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
-import moment from "moment";
-import toast from "react-simple-toasts";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import _ from "lodash";
-import ComponentDonasi_IsEmptyData from "../component/is_empty_data";
+import moment from "moment";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../component/tampilan_rupiah";
+import { MODEL_DONASI_INVOICE } from "../model/interface";
 
 export default function DonasiSayaDonasi({
   listInvoice,
@@ -42,71 +36,70 @@ export default function DonasiSayaDonasi({
   const { height, width } = useViewportSize();
 
   if (_.isEmpty(listInvoice))
-    return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
+    return <ComponentGlobal_IsEmptyData />;
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {invoice.map((e, i) => (
-          <Box
-            key={i}
-            onClick={() =>
-              onClick(router, e.donasiMaster_StatusInvoiceId, e.id, e.Donasi.id)
-            }
-          >
-            <Stack>
-              <Grid>
-                <Grid.Col span={5}>
-                  <Stack spacing={5}>
-                    <Stack spacing={0}>
-                      <Text fz={"xs"} fw={"bold"} truncate>
-                        {e.Donasi.title}
-                      </Text>
-                      <ComponentDonasi_TampilanHitungMundur
-                        durasi={e.Donasi.DonasiMaster_Durasi.name}
-                        publishTime={e.Donasi.publishTime}
-                        textSize={10}
-                      />
-                    </Stack>
-                    <Progress value={+e.Donasi.progres} color="orange" />
-                    <Group position="apart">
-                      <Stack spacing={0}>
-                        <Text fz={10}>Donasi Saya</Text>
-                        <Text fz={10} fw={"bold"} c={"orange"} truncate>
-                          <TampilanRupiahDonasi nominal={+e.nominal} />
-                        </Text>
-                      </Stack>
-                    </Group>
-                    <Badge size="xs" variant="dot">
-                      <Text>{e.DonasiMaster_StatusInvoice.name}</Text>
-                    </Badge>
+      {invoice.map((e, i) => (
+        <Box
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+          key={i}
+          onClick={() =>
+            onClick(router, e.donasiMaster_StatusInvoiceId, e.id, e.Donasi.id)
+          }
+        >
+          <Stack>
+            <Grid>
+              <Grid.Col span={5}>
+                <Stack spacing={5}>
+                  <Stack spacing={0}>
+                    <Text fz={"xs"} fw={"bold"} truncate>
+                      {e.Donasi.title}
+                    </Text>
+                    <ComponentDonasi_TampilanHitungMundur
+                      durasi={e.Donasi.DonasiMaster_Durasi.name}
+                      publishTime={e.Donasi.publishTime}
+                      textSize={10}
+                    />
                   </Stack>
-                </Grid.Col>
-                <Grid.Col span={7}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Paper radius={"md"}>
-                      <Image
-                        alt="Foto"
-                        src={RouterDonasi.api_gambar + `${e.Donasi.imagesId}`}
-                        radius={"md"}
-                      />
-                    </Paper>
-                  </AspectRatio>
-                </Grid.Col>
-              </Grid>
-              {width > 575 ? "" : <Divider />}
-            </Stack>
-          </Box>
-        ))}
-      </SimpleGrid>
+                  <Progress value={+e.Donasi.progres} color="orange" />
+                  <Group position="apart">
+                    <Stack spacing={0}>
+                      <Text fz={10}>Donasi Saya</Text>
+                      <Text fz={10} fw={"bold"} c={"orange"} truncate>
+                        <TampilanRupiahDonasi nominal={+e.nominal} />
+                      </Text>
+                    </Stack>
+                  </Group>
+                  <Badge size="xs" variant="filled" color="yellow">
+                    <Text>{e.DonasiMaster_StatusInvoice.name}</Text>
+                  </Badge>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={7}>
+                <AspectRatio ratio={16 / 9}>
+                  <Paper radius={"md"}>
+                    <Image
+                      alt="Foto"
+                      src={RouterDonasi.api_gambar + `${e.Donasi.imagesId}`}
+                      radius={"md"}
+                    />
+                  </Paper>
+                </AspectRatio>
+              </Grid.Col>
+            </Grid>
+            {/* {width > 575 ? "" : <Divider />} */}
+          </Stack>
+        </Box>
+      ))}
     </>
   );
 }

src/app_modules/donasi/main/galang_dana.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import {
-  Affix,
-  Box,
-  Button,
-  Divider,
-  Stack,
-  Tabs,
-  TabsProps,
-  Text,
-  rem,
-} from "@mantine/core";
-import { IconCirclePlus } from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { gs_donasi_tabs_posting } from "../global_state";
-import PostingPublishDonasi from "./galang_dana/publish";
-import PostingReviewDonasi from "./galang_dana/review";
-import PostingRejectDonasi from "./galang_dana/reject";
-import { Warna } from "@/app/lib/warna";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import PostingDraftDonasi from "./galang_dana/draft";
-
-export default function GalangDanaDonasi({
-  listPublish,
-  listReview,
-  listDraft,
-  listReject,
-}: {
-  listPublish: any;
-  listReview: any;
-  listDraft: any;
-  listReject: any;
-}) {
-  const router = useRouter();
-  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
-    gs_donasi_tabs_posting
-  );
-
-  const listPosting = [
-    {
-      id: 1,
-      value: "Publish",
-      path: <PostingPublishDonasi listPublish={listPublish} />,
-      color: "green",
-    },
-    {
-      id: 2,
-      value: "Review",
-      path: <PostingReviewDonasi listReview={listReview} />,
-      color: "yellow",
-    },
-    {
-      id: 3,
-      value: "Draft",
-      path: <PostingDraftDonasi listDraft={listDraft} />,
-      color: "red",
-    },
-    {
-      id: 4,
-      value: "Reject",
-      path: <PostingRejectDonasi listReject={listReject} />,
-      color: "red",
-    },
-  ];
-
-  return (
-    <>
-      {/* <Affix position={{ bottom: rem(150), right: rem(20) }}>
-        <Button
-          radius={"xl"}
-          bg={"orange"}
-          color="orange"
-          leftIcon={<IconCirclePlus />}
-          onClick={() => router.push(RouterDonasi.create_donasi)}
-        >
-          Galang Dana
-        </Button>
-      </Affix> */}
-      <Stack>
-        <Tabs
-          color="orange"
-          variant="pills"
-          radius="xl"
-          defaultValue="Publish"
-          value={tabsPostingDonasi}
-          onTabChange={setTabsPostingDonasi}
-        >
-          <Stack>
-            <Tabs.List grow>
-              {listPosting.map((e, i) => (
-                <Tabs.Tab
-                  key={e.id}
-                  value={e.value}
-                  bg={tabsPostingDonasi === e.value ? e.color : "gray.1"}
-                >
-                  <Text
-                    c={tabsPostingDonasi === e.value ? "white" : "gray"}
-                    fw={tabsPostingDonasi === e.value ? 900 : "normal"}
-                  >
-                    {e.value}
-                  </Text>
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-            {listPosting.map((e, i) => (
-              <Tabs.Panel key={e.id} value={e.value} pt="xs">
-                {e.path}
-              </Tabs.Panel>
-            ))}
-          </Stack>
-        </Tabs>
-      </Stack>
-    </>
-  );
-}

src/app_modules/donasi/main/galang_dana/draft.tsx

@@ -2,89 +2,30 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  AspectRatio,
-  Box,
-  Button,
-  Card,
-  Center,
-  Divider,
-  Grid,
-  Image,
-  Paper,
-  Progress,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
+  Box
 } from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-
-import toast from "react-simple-toasts";
-import { MODEL_DONASI } from "../../model/interface";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import _ from "lodash";
+import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
+import { MODEL_DONASI } from "../../model/interface";
 
 export default function PostingDraftDonasi({
   listDraft,
 }: {
   listDraft: MODEL_DONASI[];
 }) {
-  const { height, width } = useViewportSize();
-  const router = useRouter();
-
-  if (_.isEmpty(listDraft))
-    return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
+  if (_.isEmpty(listDraft)) return <ComponentGlobal_IsEmptyData />;
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {listDraft.map((e, i) => (
-          <Box
-            key={i}
-            onClick={() => router.push(RouterDonasi.detail_draft + `${e.id}`)}
-          >
-            <Stack>
-              <Grid>
-                <Grid.Col span={7}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Paper radius={"md"}>
-                      <Image
-                        alt="Foto"
-                        src={RouterDonasi.api_gambar + `${e.imagesId}`}
-                        radius={"md"}
-                      />
-                    </Paper>
-                  </AspectRatio>
-                </Grid.Col>
-                <Grid.Col span={5}>
-                  <Stack spacing={"xs"}>
-                    <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                      {e.title}
-                    </Text>
-                    <Stack spacing={0}>
-                      <Text fz={"sm"}>Terget Dana</Text>
-                      <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
-                        <TampilanRupiahDonasi nominal={+e.target} />
-                      </Text>
-                    </Stack>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-              {width > 575 ? "" : <Divider />}
-            </Stack>
-          </Box>
-        ))}
-      </SimpleGrid>
+      {listDraft.map((e, i) => (
+        <Box key={i}>
+          <ComponentDonasi_CardStatus
+            data={e}
+            path={RouterDonasi.detail_draft}
+          />
+        </Box>
+      ))}
     </>
   );
 }

src/app_modules/donasi/main/galang_dana/publish.tsx

@@ -1,40 +1,40 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  AspectRatio,
-  Box,
-  Button,
-  Card,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Progress,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import toast from "react-simple-toasts";
+import ComponentDonasi_CardPublish from "../../component/card_view/box_publish";
 import { MODEL_DONASI } from "../../model/interface";
 import { useState } from "react";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import ComponentDonasi_TampilanHitungMundur from "../../component/tampilan_hitung_mundur";
-import ComponentDonasi_BoxPublish from "../../component/box_publish";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import _ from "lodash";
+import { Box } from "@mantine/core";
 
 export default function PostingPublishDonasi({
   listPublish,
 }: {
   listPublish: MODEL_DONASI[];
 }) {
+  const [data, setData] = useState(listPublish);
+
   return (
     <>
-      <ComponentDonasi_BoxPublish dataDonasi={listPublish} path={RouterDonasi.detail_publish} />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        data.map((e, i) => (
+          <Box key={i}>
+            <ComponentDonasi_CardPublish
+              data={e}
+              path={RouterDonasi.detail_publish}
+            />
+          </Box>
+        ))
+      )}
     </>
   );
+
+  // return (
+  //   <>
+  //     <ComponentDonasi_CardPublish dataDonasi={listPublish} path={RouterDonasi.detail_publish} />
+  //   </>
+  // );
 }

src/app_modules/donasi/main/galang_dana/reject.tsx

@@ -4,9 +4,6 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
   AspectRatio,
   Box,
-  Button,
-  Card,
-  Center,
   Divider,
   Grid,
   Image,
@@ -14,78 +11,88 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title,
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
-import toast from "react-simple-toasts";
-import { MODEL_DONASI } from "../../model/interface";
 import { useState } from "react";
 import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
-import _ from "lodash";
+import { MODEL_DONASI } from "../../model/interface";
+import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
 
 export default function PostingRejectDonasi({
   listReject,
 }: {
   listReject: MODEL_DONASI[];
 }) {
-  const { height, width } = useViewportSize();
-  const router = useRouter();
-  const [donasi, setDonasi] = useState(listReject);
-
-  if (_.isEmpty(listReject))
-    return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
+  const [data, setData] = useState(listReject);
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {donasi.map((e, i) => (
-          <Box
-            key={i}
-            onClick={() => router.push(RouterDonasi.detail_reject + `${e.id}`)}
-          >
-            <Stack>
-              <Grid>
-                <Grid.Col span={7}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Paper radius={"md"}>
-                      <Image
-                        alt="Foto"
-                        src={RouterDonasi.api_gambar + `${e.imagesId}`}
-                        radius={"md"}
-                      />
-                    </Paper>
-                  </AspectRatio>
-                </Grid.Col>
-                <Grid.Col span={5}>
-                  <Stack spacing={"xs"}>
-                    <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                      {e.title}
-                    </Text>
-                    <Stack spacing={0}>
-                      <Text fz={"sm"} fw={"bold"}>
-                        Alasan ditolak
-                      </Text>
-                      <Text fz={"sm"} lineClamp={2}>
-                        {e.catatan}
-                      </Text>
-                    </Stack>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-              {width > 575 ? "" : <Divider />}
-            </Stack>
-          </Box>
-        ))}
-      </SimpleGrid>
+      {data.map((e, i) => (
+        <Box key={i}>
+          <ComponentDonasi_CardStatus
+            data={e}
+            path={RouterDonasi.detail_reject}
+          />
+        </Box>
+      ))}
     </>
   );
+
+  // if (_.isEmpty(listReject))
+  //   return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
+
+  // return (
+  //   <>
+  //     <SimpleGrid
+  //       cols={4}
+  //       spacing="lg"
+  //       breakpoints={[
+  //         { maxWidth: "62rem", cols: 3, spacing: "md" },
+  //         { maxWidth: "48rem", cols: 2, spacing: "sm" },
+  //         { maxWidth: "36rem", cols: 1, spacing: "sm" },
+  //       ]}
+  //     >
+  //       {donasi.map((e, i) => (
+  //         <Box
+  //           key={i}
+  //           onClick={() => router.push(RouterDonasi.detail_reject + `${e.id}`)}
+  //         >
+  //           <Stack>
+  //             <Grid>
+  //               <Grid.Col span={7}>
+  //                 <AspectRatio ratio={16 / 9}>
+  //                   <Paper radius={"md"}>
+  //                     <Image
+  //                       alt="Foto"
+  //                       src={RouterDonasi.api_gambar + `${e.imagesId}`}
+  //                       radius={"md"}
+  //                     />
+  //                   </Paper>
+  //                 </AspectRatio>
+  //               </Grid.Col>
+  //               <Grid.Col span={5}>
+  //                 <Stack spacing={"xs"}>
+  //                   <Text fz={"sm"} fw={"bold"} lineClamp={2}>
+  //                     {e.title}
+  //                   </Text>
+  //                   <Stack spacing={0}>
+  //                     <Text fz={"sm"} fw={"bold"}>
+  //                       Alasan ditolak
+  //                     </Text>
+  //                     <Text fz={"sm"} lineClamp={2}>
+  //                       {e.catatan}
+  //                     </Text>
+  //                   </Stack>
+  //                 </Stack>
+  //               </Grid.Col>
+  //             </Grid>
+  //             {width > 575 ? "" : <Divider />}
+  //           </Stack>
+  //         </Box>
+  //       ))}
+  //     </SimpleGrid>
+  //   </>
+  // );
 }

src/app_modules/donasi/main/galang_dana/review.tsx

@@ -1,92 +1,29 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  AspectRatio,
-  Box,
-  Button,
-  Card,
-  Center,
-  Divider,
-  Grid,
-  Image,
-  Paper,
-  Progress,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-
-import toast from "react-simple-toasts";
-import { MODEL_DONASI } from "../../model/interface";
+import { Box } from "@mantine/core";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import _ from "lodash";
-import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
+import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
+import { MODEL_DONASI } from "../../model/interface";
 
 export default function PostingReviewDonasi({
   listReview,
 }: {
   listReview: MODEL_DONASI[];
 }) {
-  const { height, width } = useViewportSize();
-  const router = useRouter();
-
-  if (_.isEmpty(listReview))
-    return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
+  if (_.isEmpty(listReview)) return <ComponentGlobal_IsEmptyData />;
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {listReview.map((e, i) => (
-          <Box
-            key={i}
-            onClick={() => router.push(RouterDonasi.detail_review + `${e.id}`)}
-          >
-            <Stack>
-              <Grid>
-                <Grid.Col span={7}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Paper radius={"md"} bg={"gray.1"}>
-                      <Image
-                        alt="Foto"
-                        src={RouterDonasi.api_gambar + `${e.imagesId}`}
-                        radius={"md"}
-                      />
-                    </Paper>
-                  </AspectRatio>
-                </Grid.Col>
-                <Grid.Col span={5}>
-                  <Stack spacing={"xs"}>
-                    <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                      {e.title}
-                    </Text>
-                    <Stack spacing={0}>
-                      <Text fz={"sm"}>Terget Dana</Text>
-                      <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
-                        Rp.{" "}
-                        {new Intl.NumberFormat("id-ID", {
-                          maximumFractionDigits: 10,
-                        }).format(+e.target)}
-                      </Text>
-                    </Stack>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-              {width > 575 ? "" : <Divider />}
-            </Stack>
-          </Box>
-        ))}
-      </SimpleGrid>
+      {listReview.map((e, i) => (
+        <Box key={i}>
+          <ComponentDonasi_CardStatus
+            data={e}
+            path={RouterDonasi.detail_review}
+          />
+        </Box>
+      ))}
     </>
   );
 }

src/app_modules/donasi/main/galang_dana/ui_galang_dana.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  Stack,
+  Tabs,
+  Text
+} from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_donasi_tabs_posting } from "../../global_state";
+import PostingDraftDonasi from "./draft";
+import PostingPublishDonasi from "./publish";
+import PostingRejectDonasi from "./reject";
+import PostingReviewDonasi from "./review";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+
+export default function GalangDanaDonasi({
+  listPublish,
+  listReview,
+  listDraft,
+  listReject,
+}: {
+  listPublish: any;
+  listReview: any;
+  listDraft: any;
+  listReject: any;
+}) {
+  const router = useRouter();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+
+  const listPosting = [
+    {
+      id: 1,
+      value: "Publish",
+      path: <PostingPublishDonasi listPublish={listPublish} />,
+      color: "green",
+    },
+    {
+      id: 2,
+      value: "Review",
+      path: <PostingReviewDonasi listReview={listReview} />,
+      color: "yellow",
+    },
+    {
+      id: 3,
+      value: "Draft",
+      path: <PostingDraftDonasi listDraft={listDraft} />,
+      color: "red",
+    },
+    {
+      id: 4,
+      value: "Reject",
+      path: <PostingRejectDonasi listReject={listReject} />,
+      color: "red",
+    },
+  ];
+
+  return (
+    <>
+      <Tabs
+        color="orange"
+        variant="pills"
+        radius="xl"
+        defaultValue="Publish"
+        value={tabsPostingDonasi}
+        onTabChange={setTabsPostingDonasi}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+        }}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listPosting.map((e, i) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.value}
+                fw={"bold"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    tabsPostingDonasi === e.value ? MainColor.yellow : "white",
+                  border:
+                    tabsPostingDonasi === e.value
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
+              >
+                {e.value}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listPosting.map((e, i) => (
+            <Tabs.Panel key={e.id} value={e.value} pt="xs">
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

src/app_modules/donasi/main/layout.tsx

@@ -1,30 +1,22 @@
 "use client";
 
-import {
-  ActionIcon,
-  Center,
-  Flex,
-  Footer,
-  Grid,
-  Group,
-  Header,
-  Text,
-  Title
-} from "@mantine/core";
 import React, { useState } from "react";
-
-import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-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 {
-  IconChevronLeft,
   IconGiftCardFilled,
   IconHome,
-  IconMoneybag
+  IconMoneybag,
 } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { gs_donasi_hot_menu } from "../global_state";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 
 export default function LayoutDonasi({
   children,
@@ -40,7 +32,7 @@ export default function LayoutDonasi({
   const [isLoading, setLoading] = useState(false);
   const [isRightLoading, setRightLoading] = useState(false);
 
-  const listPage = [
+  const listFooter = [
     {
       id: 1,
       name: "Beranda",
@@ -63,80 +55,122 @@ export default function LayoutDonasi({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
-              <ActionIcon
-                radius={"xl"}
-                variant="transparent"
-                loading={isLoading ? true : false}
-                onClick={() => {
-                  setLoading(true);
-                  router.push(RouterCrowd.main);
-                }}
-              >
-                <IconChevronLeft />
-              </ActionIcon>
-              <Title order={5}>Donasi</Title>
-              <ActionIcon disabled variant="transparent"/>
-              {/* <ActionIcon
-                radius={"md"}
-                loading={isRightLoading ? true : false}
-                variant="transparent"
-                onClick={() => {
-                  setRightLoading(true);
-                  router.push(RouterDonasi.notif_page + `${userId}`);
-                }}
-              >
-                {_.isEmpty(isRead) ? (
-                  <IconBell />
-                ) : isRead.includes(false) ? (
-                  <Indicator processing color="orange">
-                    <IconBell />
-                  </Indicator>
-                ) : (
-                  <IconBell />
-                )}
-              </ActionIcon> */}
-            </Group>
-          </Header>
+          <UIGlobal_LayoutHeaderTamplate
+            title="Donasi"
+            routerLeft={RouterCrowd.main}
+          />
         }
         footer={
-          <Footer height={"10vh"} bg={"dark"}>
-            <Grid align="center" h={"10vh"} pt={"xs"} grow>
-              {/* Tampilan Bursa */}
-              {listPage.map((e, i) => (
-                <Grid.Col
-                  key={e.id}
-                  span={3}
-                  onClick={() => {
-                    router.push(e.path);
-                    setActive(i);
-                  }}
+          <SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
+            {listFooter.map((e, i) => (
+              <Stack key={i} align="center" justify="center" spacing={0}>
+                <ActionIcon
+                  // disabled={e.path === "" ? true : false}
+                  variant="transparent"
+                  c={active === i ? MainColor.yellow : "white"}
+                  onClick={() =>
+                    e.path === ""
+                      ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                      : (router.replace(e.path), setActive(i))
+                  }
                 >
-                  <Center>
-                    <Flex direction={"column"} align={"center"} w={"100%"}>
-                      <ActionIcon
-                        variant="transparent"
-                        c={active === i ? "orange" : "white"}
-                      >
-                        {e.icon}
-                      </ActionIcon>
-                      <Text c={active === i ? "orange" : "white"} fz={"xs"}>
-                        {e.name}
-                      </Text>
-                    </Flex>
-                  </Center>
-                </Grid.Col>
-              ))}
-            </Grid>
-          </Footer>
+                  {e.icon}
+                </ActionIcon>
+                <Text
+                  c={active === i ? MainColor.yellow : "white"}
+                  fz={"xs"}
+                  lineClamp={1}
+                >
+                  {e.name}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
         }
       >
-        {/* {JSON.stringify(isRead)} */}
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
+
+  // return (
+  //   <>
+  //     <AppComponentGlobal_LayoutTamplate
+  //       header={
+  //         <Header height={50} sx={{ borderStyle: "none" }}>
+  //           <Group h={50} position="apart" px={"md"}>
+  //             <ActionIcon
+  //               radius={"xl"}
+  //               variant="transparent"
+  //               loading={isLoading ? true : false}
+  //               onClick={() => {
+  //                 setLoading(true);
+  //                 router.push(RouterCrowd.main);
+  //               }}
+  //             >
+  //               <IconChevronLeft />
+  //             </ActionIcon>
+  //             <Title order={5}>Donasi</Title>
+  //             <ActionIcon disabled variant="transparent" />
+  //             {/* <ActionIcon
+  //               radius={"md"}
+  //               loading={isRightLoading ? true : false}
+  //               variant="transparent"
+  //               onClick={() => {
+  //                 setRightLoading(true);
+  //                 router.push(RouterDonasi.notif_page + `${userId}`);
+  //               }}
+  //             >
+  //               {_.isEmpty(isRead) ? (
+  //                 <IconBell />
+  //               ) : isRead.includes(false) ? (
+  //                 <Indicator processing color="orange">
+  //                   <IconBell />
+  //                 </Indicator>
+  //               ) : (
+  //                 <IconBell />
+  //               )}
+  //             </ActionIcon> */}
+  //           </Group>
+  //         </Header>
+  //       }
+  //       footer={
+  //         <Footer height={"10vh"} bg={"dark"}>
+  //           <Grid align="center" h={"10vh"} pt={"xs"} grow>
+  //             {/* Tampilan Bursa */}
+  //             {listPage.map((e, i) => (
+  //               <Grid.Col
+  //                 key={e.id}
+  //                 span={3}
+  //                 onClick={() => {
+  //                   router.push(e.path);
+  //                   setActive(i);
+  //                 }}
+  //               >
+  //                 <Center>
+  //                   <Flex direction={"column"} align={"center"} w={"100%"}>
+  //                     <ActionIcon
+  //                       variant="transparent"
+  //                       c={active === i ? "orange" : "white"}
+  //                     >
+  //                       {e.icon}
+  //                     </ActionIcon>
+  //                     <Text c={active === i ? "orange" : "white"} fz={"xs"}>
+  //                       {e.name}
+  //                     </Text>
+  //                   </Flex>
+  //                 </Center>
+  //               </Grid.Col>
+  //             ))}
+  //           </Grid>
+  //         </Footer>
+  //       }
+  //     >
+  //       {/* {JSON.stringify(isRead)} */}
+  //       {children}
+  //     </AppComponentGlobal_LayoutTamplate>
+  //   </>
+  // );
 }

src/app_modules/donasi/page_pop_up/create.tsx

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

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

@@ -1,12 +1,11 @@
 "use client";
 
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Box,
   Button,
   Center,
   CopyButton,
   FileButton,
-  FileInput,
   Grid,
   Group,
   Paper,
@@ -14,21 +13,22 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import { IconCamera, IconCircleCheck } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import { gs_donasi_hot_menu, gs_proses_donasi } from "../../global_state";
-import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
-import { useState } from "react";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import ComponentDonasi_TampilanHitungMundur from "../../component/tampilan_hitung_mundur";
-import { useRouter } from "next/navigation";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
 import { Donasi_funUploadBuktiTransferById } from "../../fun/update/fun_update_invoice";
-import { buffer } from "stream/consumers";
-import { IconCamera, IconCheck, IconCircleCheck } from "@tabler/icons-react";
+import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
+import { gs_donasi_hot_menu } from "../../global_state";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function Donasi_InvoiceProses({
   dataInvoice,
@@ -43,8 +43,18 @@ export default function Donasi_InvoiceProses({
 
   return (
     <>
-      <Stack spacing={"lg"}>
-        <Stack spacing={0}>
+      <Stack spacing={"lg"} py={"md"}>
+        <Stack
+          spacing={0}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
           <Title order={5}>Mohon transfer ke rekening dibawah</Title>
           <Group spacing={"xs"}>
             <Text>untuk diteruskan ke </Text>
@@ -52,17 +62,38 @@ export default function Donasi_InvoiceProses({
           </Group>
         </Stack>
 
-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
           <Stack spacing={"md"}>
             <Stack spacing={0}>
               <Text>Bank {invoice.DonasiMaster_Bank.name}</Text>
               <Text>PT. Himpunan Pengusaha Badung</Text>
             </Stack>
-            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+            <Paper
+              style={{
+                backgroundColor: AccentColor.softblue,
+                border: `2px solid ${AccentColor.blue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
               <Grid>
                 <Grid.Col span={8}>
                   <Group position="left" align="center" h={"100%"}>
-                    <Title order={4}>{invoice.DonasiMaster_Bank.norek}</Title>
+                    <Title order={4} color={MainColor.yellow}>
+                      {invoice.DonasiMaster_Bank.norek}
+                    </Title>
                   </Group>
                 </Grid.Col>
                 <Grid.Col span={4}>
@@ -70,10 +101,12 @@ export default function Donasi_InvoiceProses({
                     <CopyButton value={invoice.DonasiMaster_Bank.norek}>
                       {({ copied, copy }) => (
                         <Button
-                          color={copied ? "teal" : "blue"}
-                          variant="outline"
+                          style={{
+                            transition: "0.5s",
+                          }}
                           radius={"xl"}
                           onClick={copy}
+                          color={copied ? "teal" : "yellow"}
                         >
                           {copied ? "Berhasil" : "Salin"}
                         </Button>
@@ -86,16 +119,35 @@ export default function Donasi_InvoiceProses({
           </Stack>
         </Paper>
 
-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
           <Stack spacing={"md"}>
             <Stack spacing={0}>
               <Text>Jumlah transfer</Text>
             </Stack>
-            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+            <Paper
+              style={{
+                backgroundColor: AccentColor.softblue,
+                border: `2px solid ${AccentColor.blue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
               <Grid>
                 <Grid.Col span={8}>
                   <Group position="left" align="center" h={"100%"}>
-                    <Title order={4}>
+                    <Title order={4} color="white">
                       <TampilanRupiahDonasi nominal={+(+invoice.nominal)} />
                     </Title>
                   </Group>
@@ -105,9 +157,12 @@ export default function Donasi_InvoiceProses({
                     <CopyButton value={"" + +invoice.nominal}>
                       {({ copied, copy }) => (
                         <Button
-                          color={copied ? "teal" : "blue"}
-                          variant="outline"
+                          style={{
+                            transition: "0.5s",
+                          }}
+                          variant="filled"
                           radius={"xl"}
+                          color={copied ? "teal" : "yellow"}
                           onClick={copy}
                         >
                           {copied ? "Berhasil" : "Salin"}
@@ -118,13 +173,23 @@ export default function Donasi_InvoiceProses({
                 </Grid.Col>
               </Grid>
             </Paper>
-            <Text fz={"xs"} c={"gray"}>
+            {/* <Text fz={"xs"} c={"gray"}>
               Sudah termasuk biaya admin Rp. 2.500,-
-            </Text>
+            </Text> */}
           </Stack>
         </Paper>
 
-        <Paper p={"md"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
           <Stack spacing={"sm"}>
             <Center>
               <FileButton
@@ -147,9 +212,9 @@ export default function Donasi_InvoiceProses({
                   <Button
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
+                    bg={MainColor.yellow}
+                    color="yellow"
                   >
                     Upload
                   </Button>
@@ -178,8 +243,9 @@ export default function Donasi_InvoiceProses({
         {file !== null ? (
           <Button
             radius={"xl"}
-            bg={"orange"}
-            color="orange"
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
             onClick={() => onClick(router, invoice.id, setActive)}
           >
             Saya Sudah Transfer

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

@@ -11,6 +11,8 @@ import { useAtom } from "jotai";
 import { title } from "process";
 import { useRouter } from "next/navigation";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutDonasi_InvoiceProses({
   children,
@@ -25,21 +27,20 @@ export default function LayoutDonasi_InvoiceProses({
   }
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
+          <UIGlobal_LayoutHeaderTamplate
+            title="Invoice"
+            customButtonLeft={
               <ActionIcon variant="transparent" onClick={() => onClick()}>
-                <IconX />
+                <IconX color="white"/>
               </ActionIcon>
-              <Title order={5}>Invoice</Title>
-              <ActionIcon disabled variant="transparent"></ActionIcon>
-            </Group>
-          </Header>
+            }
+          />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,17 +1,19 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import {
   Box,
   Button,
-  Grid,
   Group,
-  NumberInput,
   Paper,
   Stack,
   Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
 import {
   IconChevronRight,
@@ -20,10 +22,10 @@ import {
   IconMoodSmileDizzy,
   IconMoodXd,
 } from "@tabler/icons-react";
+import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import { useAtom } from "jotai";
 import { gs_proses_donasi } from "../../global_state";
 
 const listNominal = [
@@ -75,12 +77,16 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
           {listNominal.map((e) => (
             <Paper
               key={e.id}
-              withBorder
-              radius={"md"}
-              p={"sm"}
-              shadow="lg"
-              mb={"md"}
               onClick={() => onProses(e.jumlah)}
+              style={{
+                backgroundColor: AccentColor.blue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+                marginBottom: "15px",
+              }}
             >
               <Group position="apart">
                 <Group>
@@ -97,7 +103,17 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
             </Paper>
           ))}
         </Box>
-        <Paper p={"sm"} withBorder shadow="lg">
+
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
           <Stack>
             <Text>Nominal Lainnya</Text>
             <TextInput
@@ -133,6 +149,9 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
           disabled={value === 0 || value < 10000}
           radius={"xl"}
           onClick={() => onProses(value)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Lanjutan Pembayaran
         </Button>