#style:

Deskripsi :
- Perbaikan UI Donasi
## NO Issue

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>
     </>
   );
 }