src/app/api/new/donasi/invoice/route.ts

@@ -0,0 +1,77 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+
+
+// GET ALL DATA DONASI SAYA (INVOICE)
+export async function GET(request: Request) {
+   try {
+      const { searchParams } = new URL(request.url)
+      const page = searchParams.get("page")
+      const dataSkip = Number(page) * 5 - 5;
+
+
+      const userLoginId = await funGetUserIdByToken()
+      if (userLoginId == null) {
+         return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
+      }
+
+      const data = await prisma.donasi_Invoice.findMany({
+         take: 5,
+         skip: dataSkip,
+         orderBy: {
+            createdAt: "desc",
+         },
+         where: {
+            authorId: userLoginId,
+         },
+         select: {
+            id: true,
+            nominal: true,
+            donasiMaster_StatusInvoiceId: true,
+            DonasiMaster_StatusInvoice: {
+               select: {
+                  name: true
+               }
+            },
+            Donasi: {
+               select: {
+                  id: true,
+                  title: true,
+                  publishTime: true,
+                  progres: true,
+                  imageId: true,
+                  DonasiMaster_Durasi: {
+                     select: {
+                        name: true
+                     }
+                  },
+               },
+            },
+         },
+      });
+
+      const dataFix = data.map((v: any) => ({
+         ..._.omit(v, ["DonasiMaster_StatusInvoice", "Donasi"]),
+         nameStatusInvoice: v.DonasiMaster_StatusInvoice.name,
+         donasiId: v.Donasi.id,
+         title: v.Donasi.title,
+         publishTime: v.Donasi.publishTime,
+         progres: v.Donasi.progres,
+         imageId: v.Donasi.imageId,
+         durasiDonasi: v.Donasi.DonasiMaster_Durasi.name
+      }))
+
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/dev/donasi/main/donasi_saya/page.tsx

@@ -1,8 +1,12 @@
-import { DonasiSayaDonasi } from "@/app_modules/donasi";
-import { donasi_funGetAllInvoiceByAuthorId } from "@/app_modules/donasi/fun/get/get_all_invoice_by_author_id";
+import DonasiSayaNew from "@/app_modules/donasi/main/donasi_saya_new";
 
 export default async function Page() {
-  const listInvoice = await donasi_funGetAllInvoiceByAuthorId({ page: 1 });
+  // const listInvoice = await donasi_funGetAllInvoiceByAuthorId({ page: 1 });
 
-  return <DonasiSayaDonasi listInvoice={listInvoice as any} />;
+  return (
+    <>
+      {/* <DonasiSayaDonasi listInvoice={listInvoice as any} />; */}
+      <DonasiSayaNew />
+    </>
+  )
 }

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

@@ -0,0 +1,83 @@
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { Badge, Card, Grid, Group, Progress, Stack, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { IDataAllDonasiSaya } from "../../lib/type_donasi";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+
+export function ComponentDonasi_CardInvoiceNew({ data, }: { data: IDataAllDonasiSaya; }) {
+   const router = useRouter();
+
+   async function onCekInvoice() {
+      if (data.donasiMaster_StatusInvoiceId === "1") {
+         return router.push(RouterDonasi.detail_donasi_saya + `${data?.id}`);
+      } else {
+         if (data.donasiMaster_StatusInvoiceId === "2") {
+            return router.push(RouterDonasi.proses_transaksi + `${data?.id}`);
+         } else {
+            if (data.donasiMaster_StatusInvoiceId === "3") {
+               return router.push(RouterDonasi.invoice + `${data?.id}`);
+            } else {
+               ComponentGlobal_NotifikasiGagal("Gagal Melihat Invoice");
+            }
+         }
+      }
+   }
+
+   return (
+      <>
+         <Card
+            style={{
+               backgroundColor: AccentColor.blue,
+               border: `2px solid ${AccentColor.darkblue}`,
+               padding: "15px",
+               cursor: "pointer",
+               borderRadius: "10px",
+               color: "white",
+               marginBottom: "15px",
+            }}
+            onClick={() => onCekInvoice()}
+         >
+            <Stack>
+               <Grid>
+                  <Grid.Col span={5}>
+                     <Stack spacing={5}>
+                        <Stack spacing={0}>
+                           <Text fz={"xs"} fw={"bold"} truncate>
+                              {data.title}
+                           </Text>
+                           <ComponentDonasi_TampilanHitungMundur
+                              durasi={data.durasiDonasi}
+                              publishTime={data.publishTime}
+                              textSize={10}
+                           />
+                        </Stack>
+                        <Progress value={+data.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={+data.nominal} />
+                              </Text>
+                           </Stack>
+                        </Group>
+                        <Badge size="xs" variant="filled" color="yellow">
+                           <Text>{data.nameStatusInvoice}</Text>
+                        </Badge>
+                     </Stack>
+                  </Grid.Col>
+                  <Grid.Col span={7}>
+                     <ComponentGlobal_LoadImageCustom
+                        height={150}
+                        fileId={data.imageId}
+                     />
+                  </Grid.Col>
+               </Grid>
+            </Stack>
+         </Card>
+      </>
+   );
+}

src/app_modules/donasi/component/skeleton_donasi.tsx

@@ -1,5 +1,5 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core";
+import { Box, Grid, Skeleton } from "@mantine/core";
 
 export default function SkeletonDonasi() {
    return <>

src/app_modules/donasi/component/skeleton_donasi_saya.tsx

@@ -0,0 +1,32 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Box, Grid, Skeleton } from "@mantine/core";
+
+export default function SkeletonDonasiSaya() {
+   return <>
+      <Box>
+         {[...Array(3)].map((_, index) => (
+            <ComponentGlobal_CardStyles key={index}>
+               <Grid>
+                  <Grid.Col span={6}>
+                     <Box>
+                        {[...Array(4)].map((_, index) => (
+                           <Box key={index} py={5}>
+                              <Grid align="center">
+                                 <Grid.Col span={12}>
+                                    <Skeleton w={"100%"} h={15} />
+                                 </Grid.Col>
+                              </Grid>
+                           </Box>
+                        ))}
+                     </Box>
+
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                     <Skeleton w={"100%"} height={100} radius="md" />
+                  </Grid.Col>
+               </Grid>
+            </ComponentGlobal_CardStyles>
+         ))}
+      </Box >
+   </>;
+}

src/app_modules/donasi/lib/api_donasi.ts

@@ -6,4 +6,9 @@ export const apiGetAllDonasi = async (path?: string) => {
 export const apiGetMasterDonasi = async (path?: string) => {
    const response = await fetch(`/api/new/donasi/master${(path) ? path : ''}`)
    return await response.json().catch(() => null)
+}
+
+export const apiGetAllDonasiSaya = async (path?: string) => {
+   const response = await fetch(`/api/new/donasi/invoice${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
 }

src/app_modules/donasi/lib/type_donasi.ts

@@ -7,4 +7,17 @@ export interface IDataAllDonasi {
    terkumpul: string
    target: string
    nameDonasiDurasi: string
+}
+
+export interface IDataAllDonasiSaya {
+   id: string
+   nominal: string
+   donasiMaster_StatusInvoiceId: string
+   nameStatusInvoice: string
+   donasiId: string
+   title: string
+   publishTime: Date
+   progres: string
+   imageId: string
+   durasiDonasi: string
 }

src/app_modules/donasi/main/donasi_saya_new.tsx

@@ -0,0 +1,72 @@
+"use client";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentDonasi_CardInvoiceNew } from "../component/card_view/card_invoice_new";
+import SkeletonDonasiSaya from "../component/skeleton_donasi_saya";
+import { apiGetAllDonasiSaya } from "../lib/api_donasi";
+import { IDataAllDonasiSaya } from "../lib/type_donasi";
+
+export default function DonasiSayaNew() {
+   const [data, setData] = useState<IDataAllDonasiSaya[]>([]);
+   const [activePage, setActivePage] = useState(1);
+   const [loading, setLoading] = useState(true)
+
+   async function getDataDonasiSaya() {
+      try {
+         setLoading(true)
+         const response = await apiGetAllDonasiSaya(`?page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getDataDonasiSaya()
+   }, []);
+
+   return (
+      <>
+         <Box>
+            {
+               loading ?
+                  <SkeletonDonasiSaya />
+                  :
+                  _.isEmpty(data) ? (
+                     <ComponentGlobal_IsEmptyData />
+                  ) : (
+                     <ScrollOnly
+                        height="82vh"
+                        renderLoading={() => (
+                           <Center>
+                              <ComponentGlobal_Loader size={25} />
+                           </Center>
+                        )}
+                        data={data}
+                        setData={setData}
+                        moreData={async () => {
+                           const pageNew = activePage + 1
+                           const loadData = await apiGetAllDonasiSaya(`?page=${pageNew}`)
+                           setActivePage((val) => val + 1);
+
+                           return loadData.data;
+                        }}
+                     >
+                        {(item) => <ComponentDonasi_CardInvoiceNew data={item} />}
+                     </ScrollOnly>
+                  )
+            }
+         </Box>
+      </>
+   );
+}