src/app/api/new/donasi/[id]/route.ts

@@ -6,25 +6,72 @@ export const dynamic = "force-dynamic";
 // GET ONE DATA DONASI
 export async function GET(request: Request, context: { params: { id: string } }) {
    try {
+      let dataFix
       const { id } = context.params
-      const data = await prisma.donasi.findFirst({
-         where: {
-            id: id
-         },
-         include: {
-            Author: true,
-            imageDonasi: true,
-            CeritaDonasi: true,
-            DonasiMaster_Ketegori: true,
-            DonasiMaster_Durasi: true,
-            DonasiMaster_Status: true,
-            Donasi_Invoice: true,
-            Donasi_Kabar: true,
-            Donasi_PencairanDana: true,
-         },
-      });
+      const { searchParams } = new URL(request.url)
+      const kategori = searchParams.get("cat")
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data }, { status: 200 });
+      if (kategori == "semua") {
+         dataFix = await prisma.donasi.findFirst({
+            where: {
+               id: id
+            },
+            include: {
+               Author: true,
+               imageDonasi: true,
+               CeritaDonasi: true,
+               DonasiMaster_Ketegori: true,
+               DonasiMaster_Durasi: true,
+               DonasiMaster_Status: true,
+               Donasi_Invoice: true,
+               Donasi_Kabar: true,
+               Donasi_PencairanDana: true,
+            },
+         });
+
+      } else if (kategori == "count") {
+         dataFix = await prisma.donasi_Invoice.count({
+            where: {
+               donasiId: id,
+               donasiMaster_StatusInvoiceId: {
+                  equals: "1"
+               }
+            }
+         });
+
+      } else {
+         let tampil
+         if (kategori == "author") {
+            tampil = {
+               authorId: true,
+               Author: {
+                  select: {
+                     username: true
+                  }
+               }
+            }
+         } else if (kategori == "cerita") {
+            tampil = {
+               id: true,
+               createdAt: true,
+               CeritaDonasi: {
+                  select: {
+                     cerita: true
+                  }
+               }
+            }
+         }
+
+         dataFix = await prisma.donasi.findFirst({
+            where: {
+               id: id
+            },
+            select: tampil
+         })
+      }
+
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
 
    }
    catch (error) {

src/app/dev/donasi/detail/main/[id]/layout.tsx

@@ -1,29 +1,25 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { LayoutDetailMainDonasi } from "@/app_modules/donasi";
-import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+import { LayoutDetailMainDonasiNew } from "@/app_modules/donasi";
 import React from "react";
 
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: { id: string };
-}) {
-  const donasiId = params.id;
-  const getData = await Donasi_getOneById(donasiId);
-  const authorId = getData?.authorId;
-  const userLoginId = await funGetUserIdByToken();
+export default async function Layout({ children, params, }: { children: React.ReactNode; params: { id: string }; }) {
+  // const donasiId = params.id;
+  // const getData = await Donasi_getOneById(donasiId);
+  // const authorId = getData?.authorId;
+  // const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      <LayoutDetailMainDonasi
+      {/* <LayoutDetailMainDonasi
         donasiId={donasiId}
         authorId={authorId as any}
         userLoginId={userLoginId as string}
       >
         {children}
-      </LayoutDetailMainDonasi>
+      </LayoutDetailMainDonasi> */}
+
+      <LayoutDetailMainDonasiNew>
+        {children}
+      </LayoutDetailMainDonasiNew>
     </>
   );
 }

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

@@ -1,22 +1,20 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { DetailMainDonasi } from "@/app_modules/donasi";
-import { Donasi_getCountDonatur } from "@/app_modules/donasi/fun/count/get_count_donatur";
-import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
+import DetailMainDonasiNew from "@/app_modules/donasi/detail/detail_main/index_new";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let donasiId = params.id;
-  const userLoginId = await funGetUserIdByToken();
+  // let donasiId = params.id;
+  // const userLoginId = await funGetUserIdByToken();
 
-  const dataDonasi = await Donasi_getOneById(donasiId);
-  const countDonatur = await Donasi_getCountDonatur(donasiId);
+  // const dataDonasi = await Donasi_getOneById(donasiId);
+  // const countDonatur = await Donasi_getCountDonatur(donasiId);
 
   return (
     <>
-      <DetailMainDonasi
+      {/* <DetailMainDonasi
         dataDonasi={dataDonasi as any}
         countDonatur={countDonatur}
         userLoginId={userLoginId as string}
-      />
+      /> */}
+      <DetailMainDonasiNew />
     </>
   );
 }

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

@@ -0,0 +1,89 @@
+"use client";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet";
+import { ActionIcon, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { IconCircleChevronRight } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiGetOneDonasiById } from "../../lib/api_donasi";
+import { useShallowEffect } from "@mantine/hooks";
+import SkeletonCeritaPenggalangDonasi from "./skeleton_cerita_penggalang";
+
+export default function ComponentDonasi_CeritaPenggalangMainNew() {
+   const router = useRouter();
+   const param = useParams<{ id: string }>();
+   const [loading, setLoading] = useState(true)
+   const [donasi, setDonasi] = useState<any>({})
+
+
+   async function getCeritaDonasi() {
+      try {
+         setLoading(true)
+         const response = await apiGetOneDonasiById(param.id, "cerita")
+         if (response.success) {
+            setDonasi(response.data)
+         }else{
+            
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getCeritaDonasi()
+   }, [])
+
+
+   return (
+      <>
+         <Stack
+            spacing={"xs"}
+            style={{
+               color: "white",
+            }}
+         >
+            <Title order={4}>Cerita Penggalang Dana</Title>
+            <Paper
+               style={{
+                  padding: "15px",
+                  backgroundColor: AccentColor.darkblue,
+                  border: `2px solid ${AccentColor.blue}`,
+                  borderRadius: "10px",
+                  color: "white",
+               }}
+            >
+               {
+                  loading ? <SkeletonCeritaPenggalangDonasi />
+                     :
+                     <Stack>
+                        <Group position="apart">
+                           <Text>
+                              {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
+                                 new Date(donasi?.createdAt)
+                              )}
+                           </Text>
+                           <ActionIcon
+                              variant="transparent"
+                              onClick={() => {
+                                 router.push(RouterDonasi.cerita_penggalang + `${donasi?.id}`);
+                              }}
+                           >
+                              <IconCircleChevronRight
+                                 style={{
+                                    color: MainColor.yellow,
+                                 }}
+                              />
+                           </ActionIcon>
+                        </Group>
+                        <Text lineClamp={4}>{donasi?.CeritaDonasi.cerita}</Text>
+                     </Stack>
+               }
+            </Paper>
+         </Stack>
+      </>
+   );
+}

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

@@ -0,0 +1,175 @@
+"use client";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageLandscape, } from "@/app_modules/_global/component";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { Divider, Grid, Group, Progress, Stack, Text, Title, } from "@mantine/core";
+import { IconClover, IconMessageChatbot, IconMoneybag, } from "@tabler/icons-react";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useParams, useRouter } from "next/navigation";
+import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
+import { MODEL_DONASI } from "../../model/interface";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+import { useState } from "react";
+import { apiGetOneDonasiById } from "../../lib/api_donasi";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { useShallowEffect } from "@mantine/hooks";
+import SkeletonDetailDanaDonasi from "./skeleton_detail_dana_donasi";
+
+export function ComponentDonasi_DetailDataMainNew() {
+   const router = useRouter();
+   const param = useParams<{ id: string }>();
+   const [loading, setLoading] = useState(true);
+   const [donasi, setDonasi] = useState<MODEL_DONASI | any>();
+   const [countDonatur, setcountDonatur] = useState(0);
+   const [userLoginId, setuserLoginId] = useState("");
+
+   async function getData() {
+      try {
+         setLoading(true)
+         const response = await apiGetOneDonasiById(param.id, "semua")
+         const response1 = await apiGetOneDonasiById(param.id, "count")
+         const response2 = await funGetUserIdByToken()
+         if (response.success) {
+            setDonasi(response.data)
+            setcountDonatur(response1.data)
+            setuserLoginId(response2)
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      getData()
+   }, [])
+
+   return (
+      <>
+         <ComponentGlobal_CardStyles>
+            {
+               loading ? <SkeletonDetailDanaDonasi />
+                  :
+                  <Stack>
+                     <ComponentGlobal_LoadImageLandscape fileId={donasi?.imageId} />
+                     <Stack spacing={0} mt={"lg"}>
+                        <Title order={4}>{donasi?.title}</Title>
+                        <ComponentDonasi_TampilanHitungMundur
+                           durasi={donasi?.DonasiMaster_Durasi.name}
+                           publishTime={donasi?.publishTime}
+                        />
+                     </Stack>
+                     <Stack spacing={0}>
+                        <Group position="apart" align="center" h={"100%"}>
+                           <Stack spacing={0}>
+                              <Text fz={12}>Dana terkumpul</Text>
+                              <Title order={4} c="blue">
+                                 <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
+                              </Title>
+                              <Group>
+                                 <Text fz={10}>Dari target</Text>{" "}
+                                 <TampilanRupiahDonasi
+                                    nominal={+donasi?.target}
+                                    fontSize={10}
+                                 />
+                              </Group>
+                           </Stack>
+                           <Stack spacing={0}>
+                              <Text fz={12}>Kategori</Text>
+                              <Title
+                                 order={4}
+                                 style={{
+                                    color: MainColor.yellow,
+                                 }}
+                              >
+                                 {donasi?.DonasiMaster_Ketegori.name}
+                              </Title>
+                           </Stack>
+                        </Group>
+                     </Stack>
+                     <Progress value={+donasi?.progres} color="yellow" size={"lg"} />
+
+                     <Grid>
+                        <Grid.Col
+                           span={"auto"}
+                           onClick={() => {
+                              router.push(RouterDonasi.donatur + `${donasi.id}`);
+                           }}
+                        >
+                           <Stack
+                              align="center"
+                              spacing={"xs"}
+                              style={{
+                                 color: MainColor.yellow,
+                              }}
+                           >
+                              <Group align="center" h={"100%"}>
+                                 <IconClover />
+                                 <Title order={6}>{countDonatur}</Title>
+                              </Group>
+                              <Text fz={"xs"} c={"white"}>
+                                 Donatur
+                              </Text>
+                           </Stack>
+                        </Grid.Col>
+                        <Divider orientation="vertical" />
+                        <Grid.Col
+                           span={"auto"}
+                           onClick={() => {
+                              router.push(RouterDonasi.daftar_kabar({ id: donasi.id }), {
+                                 scroll: false,
+                              });
+                           }}
+                        >
+                           <Stack spacing={"sm"} align="center">
+                              <IconMessageChatbot
+                                 style={{
+                                    color: MainColor.yellow,
+                                 }}
+                              />
+                              <Text fz={"xs"}>Kabar Terbaru</Text>
+                           </Stack>
+                        </Grid.Col>
+                        <Divider orientation="vertical" />
+                        <Grid.Col
+                           span={"auto"}
+                           onClick={() => {
+                              onPencairanDana(
+                                 router,
+                                 donasi,
+                                 userLoginId,
+                              );
+                           }}
+                        >
+                           <Stack spacing={"sm"} align="center">
+                              <IconMoneybag
+                                 style={{
+                                    color: MainColor.yellow,
+                                 }}
+                              />
+                              <Text fz={"xs"}>Pencairan Dana</Text>
+                           </Stack>
+                        </Grid.Col>
+                     </Grid>
+                  </Stack>
+            }
+         </ComponentGlobal_CardStyles>
+      </>
+   );
+}
+
+async function onPencairanDana(router: AppRouterInstance, donasi: MODEL_DONASI, userLoginId: string,) {
+   const cek = await Donasi_findDonaturByTokenId(donasi.id, userLoginId);
+   if (userLoginId == donasi.authorId) {
+      return router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
+   }
+
+   if (!cek) {
+      return ComponentGlobal_NotifikasiPeringatan("Halaman khusus donatur");
+   } else {
+      router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);
+   }
+}

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

@@ -0,0 +1,97 @@
+"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 { ActionIcon, Avatar, Group, Paper, Skeleton, Stack, Text, Title, } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCircleChevronRight } from "@tabler/icons-react";
+import _ from "lodash";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiGetOneDonasiById } from "../../lib/api_donasi";
+
+export default function ComponentDonasi_InformasiPenggalangMainNew() {
+   const router = useRouter();
+   const param = useParams<{ id: string }>();
+   const [loading, setLoading] = useState(true);
+   const [data, setData] = useState<any>({})
+
+
+   async function getDataAuthor() {
+      try {
+         setLoading(true)
+         const response = await apiGetOneDonasiById(param.id, "author")
+         if (response.success) {
+            setData(response.data)
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      getDataAuthor()
+   }, [])
+
+   return (
+      <>
+         <Stack
+            spacing={"xs"}
+            style={{
+               color: "white",
+            }}
+         >
+            <Title order={4}>Informasi Penggalang Dana</Title>
+            <Paper
+               style={{
+                  padding: "15px",
+                  backgroundColor: AccentColor.darkblue,
+                  border: `2px solid ${AccentColor.blue}`,
+                  borderRadius: "10px",
+                  color: "white",
+               }}
+            >
+               {
+                  loading ? <Skeleton height={100} radius="md" width={"100%"} />
+                     :
+                     <Stack>
+                        <Group position="apart">
+                           <Title order={5}>Penggalang Dana</Title>
+                           <ActionIcon
+                              variant="transparent"
+                              onClick={() => {
+                                 router.push(RouterDonasi.penggalang_dana + `${data.authorId}`);
+                              }}
+                           >
+                              <IconCircleChevronRight
+                                 style={{
+                                    color: MainColor.yellow,
+                                 }}
+                              />
+                           </ActionIcon>
+                        </Group>
+                        <Group>
+                           <Avatar radius={"xl"} variant="filled" bg={"blue"}>
+                              {(() => {
+                                 const usr = data?.Author?.username;
+                                 const splt = usr?.split("");
+                                 const Up = _.upperCase(splt[0])
+
+                                 return Up;
+                              })()}
+                           </Avatar>
+                           <Text>{data?.Author?.username}</Text>
+                        </Group>
+                        <ComponentGlobal_BoxInformation
+                           informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
+                  kabar penyaluran dapat dilihat di halaman kabar terbaru."
+                        />
+                     </Stack>
+               }
+            </Paper>
+         </Stack>
+      </>
+   );
+}

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

@@ -0,0 +1,14 @@
+import { Box, Skeleton } from "@mantine/core";
+
+export default function SkeletonCeritaPenggalangDonasi() {
+   return (
+      <>
+         <Box mb={"md"}>
+            <Skeleton height={10} mt={0} radius="xl" width={"50%"} />
+            <Skeleton height={10} mt={10} radius="xl" />
+            <Skeleton height={10} mt={10} radius="xl" />
+            <Skeleton height={10} mt={10} radius="xl" />
+         </Box>
+      </>
+   );
+}

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

@@ -0,0 +1,21 @@
+import { Box, Skeleton } from "@mantine/core";
+
+export default function SkeletonDetailDanaDonasi() {
+   return (
+      <>
+         <Box>
+            <Box mb={"md"}>
+               <Skeleton height={150} radius="md" />
+            </Box>
+            <Box mb={"md"}>
+               <Skeleton height={10} mt={10} radius="xl" width={"50%"} />
+               <Skeleton height={10} mt={10} radius="xl" />
+               <Skeleton height={10} mt={10} radius="xl" />
+            </Box>
+            <Box>
+               <Skeleton height={50} radius="md" />
+            </Box>
+         </Box>
+      </>
+   );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+import { Stack } from "@mantine/core";
+import ComponentDonasi_CeritaPenggalangMainNew from "../../component/detail_main/cerita_penggalang_new";
+import { ComponentDonasi_DetailDataMainNew } from "../../component/detail_main/detail_dana_donasi_new";
+import ComponentDonasi_InformasiPenggalangMainNew from "../../component/detail_main/informasi_penggalang_new";
+
+export default function DetailMainDonasiNew() {
+   return (
+      <>
+         <Stack spacing={40} py={"md"}>
+            <ComponentDonasi_DetailDataMainNew />
+            <ComponentDonasi_InformasiPenggalangMainNew />
+            <ComponentDonasi_CeritaPenggalangMainNew />
+         </Stack>
+      </>
+   );
+}

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

@@ -0,0 +1,85 @@
+"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 React, { useState } from "react";
+import ButtonDonasi from "../../component/footer_button_donasi";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { IconDotsVertical, IconMessageShare } from "@tabler/icons-react";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
+import { ActionIcon } from "@mantine/core";
+import { useParams } from "next/navigation";
+import { apiGetOneDonasiById } from "../../lib/api_donasi";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { useShallowEffect } from "@mantine/hooks";
+
+export default function LayoutDetailMainDonasiNew({ children, }: { children: React.ReactNode; }) {
+   const [openDrawer, setOpenDrawer] = useState(false);
+   const param = useParams<{ id: string }>();
+   const [loading, setLoading] = useState(true);
+   const [authorId, setAuthorId] = useState("");
+   const [userLogin, setUserLogin] = useState("");
+
+   const listPage = [
+      {
+         id: "1",
+         name: "Rekap Kabar",
+         icon: <IconMessageShare />,
+         path: RouterDonasi.rekap_kabar({ id: param.id }),
+      },
+   ];
+
+   async function getDataDonasi() {
+      try {
+         setLoading(true)
+         const response = await apiGetOneDonasiById(param.id, "author")
+         const response2 = await funGetUserIdByToken()
+         if (response.success) {
+            setAuthorId(response.data.authorId)
+            setUserLogin(response2)
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      getDataDonasi()
+   }, [])
+
+   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_Drawer
+            opened={openDrawer}
+            close={() => setOpenDrawer(false)}
+            component={listPage}
+         />
+      </>
+   );
+}

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

@@ -51,7 +51,7 @@ export default function EditDonasiNew() {
    async function onGetData() {
       try {
          setLoadingData(true)
-         const response = await apiGetOneDonasiById(param.id)
+         const response = await apiGetOneDonasiById(param.id, "semua")
          if (response.success) {
             setData(response.data)
          }

src/app_modules/donasi/index.ts

@@ -1,3 +1,4 @@
+import LayoutDetailMainDonasiNew from '@/app_modules/donasi/detail/detail_main/layout_new';
 import MainDonasi from "./main/beranda";
 import MainDonasiNew from "./main/beranda_new";
 import LayoutDonasi from "./main/layout";
@@ -106,5 +107,6 @@ export {
   MainDonasiNew,
   GalangDanaDonasiNew,
   CreateDonasiNew,
-  EditDonasiNew
+  EditDonasiNew,
+  LayoutDetailMainDonasiNew
 };

src/app_modules/donasi/lib/api_donasi.ts

@@ -13,7 +13,7 @@ export const apiGetAllDonasiSaya = async (path?: string) => {
    return await response.json().catch(() => null)
 }
 
-export const apiGetOneDonasiById = async (path: string) => {
-   const response = await fetch(`/api/new/donasi/${path}`)
+export const apiGetOneDonasiById = async (path: string, kategori: string) => {
+   const response = await fetch(`/api/new/donasi/${path}?cat=${kategori}`)
    return await response.json().catch(() => null)
 }