# feat

## Deskripsi :
- Notifikasi donasi
### No Issue

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+    AccentColor,
+    MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { AspectRatio, Box, Image, Paper } from "@mantine/core";
+
+export function LayoutDonasi_BuktiTransfer({ imageId }: { imageId: string }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Bukti Transfer" />}
+      >
+        <ViewBuktiTransfer imageId={imageId} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+function ViewBuktiTransfer({ imageId }: { imageId: string }) {
+  return (
+    <>
+      <Paper
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "15px",
+          borderRadius: "10px",
+        }}
+      >
+        <AspectRatio ratio={1 / 1} mah={400}>
+          <Box>
+            <Image
+              p={"md"}
+              width={250}
+              alt="Foto"
+              src={RouterDonasi.api_gambar_pencairan + `${imageId}`}
+            />
+          </Box>
+        </AspectRatio>
+      </Paper>
+    </>
+  );
+}

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

@@ -1,8 +1,6 @@
 "use client";
 
-import {
-  Stack
-} from "@mantine/core";
+import { Stack } from "@mantine/core";
 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";

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

@@ -1,6 +1,12 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
@@ -23,8 +29,10 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconTransferIn } from "@tabler/icons-react";
+import { IconImageInPicture, IconTransferIn } from "@tabler/icons-react";
+import _ from "lodash";
 import moment from "moment";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export default function PencairanDanaDonasi({
@@ -49,7 +57,17 @@ export default function PencairanDanaDonasi({
 function BoxDanaDicarikan({ akumulasi }: { akumulasi: MODEL_DONASI }) {
   return (
     <>
-      <Paper bg={"gray.1"} p={"md"}>
+      <Paper
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "15px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "10px",
+        }}
+      >
         <Stack>
           <Grid>
             <Grid.Col span={6}>
@@ -63,7 +81,7 @@ function BoxDanaDicarikan({ akumulasi }: { akumulasi: MODEL_DONASI }) {
               <Text fz={"xs"}>Pencairan dana</Text>
             </Grid.Col>
           </Grid>
-          <ComponentDonasi_NotedBox
+          <ComponentGlobal_BoxInformation
             informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
             pihak manapun, jika berita pencairan dana dibawah tidak sesuai
             dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
@@ -80,6 +98,7 @@ function InformasiPencairanDana({
 }: {
   listPD: MODEL_DONASI_PENCAIRAN_DANA[];
 }) {
+  const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [idGambar, setIdGambar] = useState("");
   return (
@@ -94,34 +113,53 @@ function InformasiPencairanDana({
           </Paper>
         </AspectRatio>
       </Modal>
-      {listPD.map((e, i) => (
-        <Paper key={i} withBorder p={"md"}>
-          <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
-          <Stack spacing={"lg"}>
-            <Title order={5}>{e.title}</Title>
-            <Spoiler
-              maxHeight={50}
-              hideLabel="Sembunyikan"
-              showLabel="Baca Selengkapnya"
-            >
-              {e.deskripsi}
-            </Spoiler>
-            <Center>
-              <Button
-                radius={"xl"}
-                variant="outline"
-                leftIcon={<IconTransferIn />}
-                onClick={() => {
-                  open();
-                  setIdGambar(e.imagesId);
-                }}
+
+      {_.isEmpty(listPD) ? (
+        <ComponentGlobal_IsEmptyData height={20} />
+      ) : (
+        listPD.map((e, i) => (
+          <Paper
+            key={i}
+            style={{
+              padding: "15px",
+              border: `2px solid ${AccentColor.blue}`,
+              backgroundColor: AccentColor.darkblue,
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
+            <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
+            <Stack spacing={"lg"}>
+              <Title order={5}>{e.title}</Title>
+              <Spoiler
+                maxHeight={50}
+                hideLabel="Sembunyikan"
+                showLabel="Baca Selengkapnya"
               >
-                Bukti Transfer
-              </Button>
-            </Center>
-          </Stack>
-        </Paper>
-      ))}
+                {e.deskripsi}
+              </Spoiler>
+              <Center>
+                <Button
+                  radius={"xl"}
+                  leftIcon={<IconImageInPicture />}
+                  onClick={() => {
+                    // open();
+                    // setIdGambar(e.imagesId);
+                    router.push(`/dev/donasi/bukti-transfer/${e.imagesId}`, {
+                      scroll: false,
+                    });
+                  }}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Bukti Transfer
+                </Button>
+              </Center>
+            </Stack>
+          </Paper>
+        ))
+      )}
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/pencairan_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 LayoutPencairanDanaDonasi({
@@ -12,11 +11,11 @@ export default function LayoutPencairanDanaDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Pencairan Dana" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Pencairan Dana" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -2,6 +2,7 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/box_publish";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
@@ -61,12 +62,20 @@ function InformasiPenggalang({ value }: { value: MODEL_USER }) {
   return (
     <>
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
-      <Paper radius={"md"}>
+      <Box
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "20px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "10px",
+        }}
+      >
         <Stack
-          bg={"gray.1"}
-          p={"md"}
+        
           spacing={"xl"}
-          sx={{ borderRadius: "10px" }}
         >
           <Stack align="center" spacing={0}>
             <Paper
@@ -87,16 +96,16 @@ function InformasiPenggalang({ value }: { value: MODEL_USER }) {
                 />
               </Center>
             </Paper>
-            <Title order={3}>@{value.username}</Title>
+            <Title order={3}>@{value?.username}</Title>
           </Stack>
           <Stack>
             <Group>
               <IconMoodSmile />
-              <Text>Nama Penggalang Dana</Text>
+              <Text>{value?.Profile.name}</Text>
             </Group>
             <Group>
               <IconPhone />
-              <Text>+{value.nomor}</Text>
+              <Text>+{value?.nomor}</Text>
             </Group>
             <Group>
               <IconBrandGmail />
@@ -104,7 +113,7 @@ function InformasiPenggalang({ value }: { value: MODEL_USER }) {
             </Group>
           </Stack>
         </Stack>
-      </Paper>
+      </Box>
     </>
   );
 }