From ce98d5bf8ef5ec5ce9925fc9279b357e7ab919e5 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Tue, 18 Mar 2025 10:59:01 +0800
Subject: [PATCH] fix layout donasi: deskripsi: - fix layout main donasi - fix
 layout main detail donasi

---
 .../dev/donasi/penggalang_dana/[id]/page.tsx  |  1 -
 .../_global/component/button_create.tsx       |  3 +
 .../_global/ui/V2_layout_tamplate.tsx         |  4 +-
 .../donasi/component/footer_button_donasi.tsx | 10 ++-
 src/app_modules/donasi/create/layout.tsx      | 17 +++-
 .../create/layout_cerita_penggalang.tsx       | 18 +++-
 .../detail_main/cerita_penggalang/layout.tsx  | 42 ++++++---
 .../detail/detail_main/donatur/layout.tsx     | 18 +++-
 .../detail/detail_main/kabar/layout.tsx       | 18 +++-
 .../donasi/detail/detail_main/layout_new.tsx  | 90 ++++++++++++-------
 .../detail_main/pencairan_dana/layout.tsx     | 18 +++-
 .../detail_main/penggalang_dana/layout.tsx    | 18 +++-
 src/app_modules/donasi/main/layout.tsx        | 50 +++++++++--
 13 files changed, 231 insertions(+), 76 deletions(-)

diff --git a/src/app/dev/donasi/penggalang_dana/[id]/page.tsx b/src/app/dev/donasi/penggalang_dana/[id]/page.tsx
index a5f4c564..9e1f0370 100644
--- a/src/app/dev/donasi/penggalang_dana/[id]/page.tsx
+++ b/src/app/dev/donasi/penggalang_dana/[id]/page.tsx
@@ -5,7 +5,6 @@ export default async function Page({ params }: { params: { id: string } }) {
   let authorId = params.id;
   const dataPenggalang = await Donasi_getAuthorById(authorId);
 
-
   return (
     <>
       <PenggalangDanaDonasi dataPenggalang={dataPenggalang as any} />
diff --git a/src/app_modules/_global/component/button_create.tsx b/src/app_modules/_global/component/button_create.tsx
index afcecc75..874f25c5 100644
--- a/src/app_modules/_global/component/button_create.tsx
+++ b/src/app_modules/_global/component/button_create.tsx
@@ -28,6 +28,9 @@ const useStyles = createStyles((theme) => ({
     [`@media (min-width: 769px)`]: {
       right: "calc(50% - 250px + 20px)", // Sesuaikan dengan lebar container (500px)
     },
+    [":hover"]: {
+      backgroundColor: AccentColor.blue,
+    },
   },
 }));
 
diff --git a/src/app_modules/_global/ui/V2_layout_tamplate.tsx b/src/app_modules/_global/ui/V2_layout_tamplate.tsx
index 1d15953e..4f8a0daa 100644
--- a/src/app_modules/_global/ui/V2_layout_tamplate.tsx
+++ b/src/app_modules/_global/ui/V2_layout_tamplate.tsx
@@ -59,7 +59,7 @@ const useStyles = createStyles((theme) => ({
     [`@media (max-width: 768px)`]: {
       height: "8vh",
     },
-    borderBottom: `1px solid ${AccentColor.blue}`,
+    borderBottom: `2px solid ${AccentColor.blue}`,
     borderBottomLeftRadius: "20px",
     borderBottomRightRadius: "20px",
   },
@@ -74,7 +74,7 @@ const useStyles = createStyles((theme) => ({
   footer: {
     width: "100%",
     backgroundColor: MainColor.darkblue,
-    borderTop: `1px solid ${AccentColor.blue}`,
+    borderTop: `2px solid ${AccentColor.blue}`,
     height: "10vh", // Tinggi footer
     display: "flex",
     alignItems: "center",
diff --git a/src/app_modules/donasi/component/footer_button_donasi.tsx b/src/app_modules/donasi/component/footer_button_donasi.tsx
index 917ef3fb..52b43006 100644
--- a/src/app_modules/donasi/component/footer_button_donasi.tsx
+++ b/src/app_modules/donasi/component/footer_button_donasi.tsx
@@ -28,13 +28,19 @@ export default function ButtonDonasi({ donasiId }: { donasiId: string }) {
       <Footer
         height={70}
         px={"md"}
-        sx={{ borderStyle: "none", backgroundColor: "transparent" }}
+        style={{
+          borderStyle: "none",
+          backgroundColor: "transparent",
+          width: "100%",
+        }}
       >
         <Center h={70}>
           <Button
+            style={{
+              width: "100%",
+            }}
             loaderPosition="center"
             loading={isLoading ? true : false}
-            w={"100%"}
             radius={"xl"}
             onClick={() => onClick()}
             bg={MainColor.yellow}
diff --git a/src/app_modules/donasi/create/layout.tsx b/src/app_modules/donasi/create/layout.tsx
index 3bf3d5eb..a780aa60 100644
--- a/src/app_modules/donasi/create/layout.tsx
+++ b/src/app_modules/donasi/create/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutCreateDonasi({
@@ -11,11 +14,17 @@ export default function LayoutCreateDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Tambah Donasi" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/create/layout_cerita_penggalang.tsx b/src/app_modules/donasi/create/layout_cerita_penggalang.tsx
index 14d2efe2..defa8b59 100644
--- a/src/app_modules/donasi/create/layout_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/layout_cerita_penggalang.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutCreateCeritaDonasi({
@@ -11,13 +14,20 @@ export default function LayoutCreateCeritaDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate title="Tambah Cerita" hideButtonLeft />
         }
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Tambah Cerita" hideButtonLeft />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx b/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
index e3f6c898..f7ae712a 100644
--- a/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
@@ -1,7 +1,11 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewFooter,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi";
 import React from "react";
 
@@ -17,22 +21,40 @@ export default function LayoutCeritaPenggalangDonasi({
   if (statusDonasiId !== "1") {
     return (
       <>
-        <UIGlobal_LayoutTamplate
+        {/* <UIGlobal_LayoutTamplate
           header={
             <UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />
           }
         >
           {children}
-        </UIGlobal_LayoutTamplate>
+        </UIGlobal_LayoutTamplate> */}
+
+        <UI_NewLayoutTamplate>
+          <UI_NewHeader>
+            <Component_Header title="Cerita Penggalang Dana" />
+          </UI_NewHeader>
+          <UI_NewChildren>{children}</UI_NewChildren>
+        </UI_NewLayoutTamplate>
       </>
     );
   }
+
   return (
-    <UIGlobal_LayoutTamplate
-      header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
-      footer={<ButtonDonasi donasiId={donasiId} />}
-    >
-      {children}
-    </UIGlobal_LayoutTamplate>
+    // <UIGlobal_LayoutTamplate
+    //   header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
+    //   footer={<ButtonDonasi donasiId={donasiId} />}
+    // >
+    //   {children}
+    // </UIGlobal_LayoutTamplate>
+
+    <UI_NewLayoutTamplate>
+      <UI_NewHeader>
+        <Component_Header title="Cerita Penggalang Dana" />
+      </UI_NewHeader>
+      <UI_NewChildren>{children}</UI_NewChildren>
+      <UI_NewFooter>
+        <ButtonDonasi donasiId={donasiId} />
+      </UI_NewFooter>
+    </UI_NewLayoutTamplate>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx b/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
index dd5d93c6..bf13569d 100644
--- a/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/donatur/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutDonaturDonasi({
@@ -11,11 +14,18 @@ export default function LayoutDonaturDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Donatur" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Donatur" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx b/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
index 586e5cce..d5a7a923 100644
--- a/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/kabar/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutKabarDonasi({
@@ -11,11 +14,18 @@ export default function LayoutKabarDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Kabar" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Kabar" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/layout_new.tsx b/src/app_modules/donasi/detail/detail_main/layout_new.tsx
index d83f2d5f..6d81ab8a 100644
--- a/src/app_modules/donasi/detail/detail_main/layout_new.tsx
+++ b/src/app_modules/donasi/detail/detail_main/layout_new.tsx
@@ -11,6 +11,8 @@ import { useParams } from "next/navigation";
 import { apiGetOneDonasiById } from "../../lib/api_donasi";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { useShallowEffect } from "@mantine/hooks";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren, UI_NewFooter } from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function LayoutDetailMainDonasiNew({ children, }: { children: React.ReactNode; }) {
    const [openDrawer, setOpenDrawer] = useState(false);
@@ -49,37 +51,63 @@ export default function LayoutDetailMainDonasiNew({ children, }: { children: Rea
    }, [])
 
    return (
-      <>
-         <UIGlobal_LayoutTamplate
-            header={
-               <UIGlobal_LayoutHeaderTamplate
-                  title="Detail Donasi"
-                  customButtonRight={
-                     loading ? ""
-                        :
-                        userLogin !== authorId ? (
-                           ""
-                        ) : (
-                           <ActionIcon
-                              variant="transparent"
-                              onClick={() => setOpenDrawer(true)}
-                           >
-                              <IconDotsVertical color="white" />
-                           </ActionIcon>
-                        )
-                  }
-               />
-            }
-            footer={<ButtonDonasi donasiId={param.id} />}
-         >
-            {children}
-         </UIGlobal_LayoutTamplate>
+     <>
+       {/* <UIGlobal_LayoutTamplate
+         header={
+           <UIGlobal_LayoutHeaderTamplate
+             title="Detail Donasi"
+             customButtonRight={
+               loading ? (
+                 ""
+               ) : userLogin !== authorId ? (
+                 ""
+               ) : (
+                 <ActionIcon
+                   variant="transparent"
+                   onClick={() => setOpenDrawer(true)}
+                 >
+                   <IconDotsVertical color="white" />
+                 </ActionIcon>
+               )
+             }
+           />
+         }
+         footer={<ButtonDonasi donasiId={param.id} />}
+       >
+         {children}
+       </UIGlobal_LayoutTamplate> */}
 
-         <UIGlobal_Drawer
-            opened={openDrawer}
-            close={() => setOpenDrawer(false)}
-            component={listPage}
-         />
-      </>
+       <UI_NewLayoutTamplate>
+         <UI_NewHeader>
+           <Component_Header
+             title="Detail Donasi"
+             customButtonRight={
+               loading ? (
+                 ""
+               ) : userLogin !== authorId ? (
+                 ""
+               ) : (
+                 <ActionIcon
+                   variant="transparent"
+                   onClick={() => setOpenDrawer(true)}
+                 >
+                   <IconDotsVertical color="white" />
+                 </ActionIcon>
+               )
+             }
+           />
+         </UI_NewHeader>
+         <UI_NewChildren>{children}</UI_NewChildren>
+         <UI_NewFooter>
+           <ButtonDonasi donasiId={param.id} />
+         </UI_NewFooter>
+       </UI_NewLayoutTamplate>
+
+       <UIGlobal_Drawer
+         opened={openDrawer}
+         close={() => setOpenDrawer(false)}
+         component={listPage}
+       />
+     </>
    );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx b/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx
index aef7f911..95c16505 100644
--- a/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/pencairan_dana/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutPencairanDanaDonasi({
@@ -11,11 +14,18 @@ export default function LayoutPencairanDanaDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Pencairan Dana" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Pencairan Dana" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx b/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
index 5fb9f851..557011bb 100644
--- a/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutPenggalangDanaDonasi({
@@ -11,14 +14,21 @@ export default function LayoutPenggalangDanaDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate title="Informasi Penggalangan Dana" />
         }
         //   footer={<FooterDonasi />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Informasi Penggalangan Dana" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/main/layout.tsx b/src/app_modules/donasi/main/layout.tsx
index 5ce8417d..5421a39a 100644
--- a/src/app_modules/donasi/main/layout.tsx
+++ b/src/app_modules/donasi/main/layout.tsx
@@ -1,11 +1,15 @@
 "use client";
 
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewFooter,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { RouterCrowd } from "@/lib/router_hipmi/router_crowd";
 import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
 import {
   IconGiftCardFilled,
@@ -48,7 +52,7 @@ export default function LayoutDonasi({
 
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Donasi"
@@ -84,7 +88,41 @@ export default function LayoutDonasi({
         }
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Donasi" routerLeft={RouterCrowd.main} />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+        <UI_NewFooter>
+          <SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"} w={"100%"}>
+            {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 : MainColor.white}
+                  onClick={() =>
+                    e.path === ""
+                      ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                      : (router.replace(e.path), setActive(i))
+                  }
+                >
+                  {e.icon}
+                </ActionIcon>
+                <Text
+                  c={active === i ? MainColor.yellow : MainColor.white}
+                  fz={"xs"}
+                  lineClamp={1}
+                >
+                  {e.name}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+        </UI_NewFooter>
+      </UI_NewLayoutTamplate>
     </>
   );
 }