Merge pull request #208 from bipproduction/amalia/18-des-24

upd: investasi

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

@@ -0,0 +1,99 @@
+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 INVESTASI SAYA (INVOICE)
+export async function GET(request: Request) {
+   try {
+      let dataFix
+      const { searchParams } = new URL(request.url)
+      const page = searchParams.get("page")
+      const dataSkip = Number(page) * 10 - 10;
+      const kategori = searchParams.get("cat")
+
+
+      const userLoginId = await funGetUserIdByToken()
+      if (userLoginId == null) {
+         return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
+      }
+
+      if (kategori == "saham-saya") {
+         const data = await prisma.investasi_Invoice.findMany({
+            take: 10,
+            skip: dataSkip,
+            orderBy: {
+               updatedAt: "desc",
+            },
+            where: {
+               authorId: userLoginId,
+               statusInvoiceId: "1",
+               isActive: true,
+            },
+            select: {
+               id: true,
+               nominal: true,
+               lembarTerbeli: true,
+               Investasi: {
+                  select: {
+                     title: true,
+                     progress: true
+                  }
+               }
+            }
+         });
+
+         dataFix = data.map((v: any) => ({
+            ..._.omit(v, ["Investasi"]),
+            title: v.Investasi.title,
+            progress: v.Investasi.progress
+         }))
+
+      } else if (kategori == "transaksi") {
+         const data = await prisma.investasi_Invoice.findMany({
+            take: 10,
+            skip: dataSkip,
+            orderBy: {
+               updatedAt: "desc",
+            },
+            where: {
+               authorId: userLoginId,
+            },
+            select: {
+               id: true,
+               statusInvoiceId: true,
+               nominal: true,
+               createdAt: true,
+               StatusInvoice: {
+                  select: {
+                     name: true
+                  }
+               },
+               Investasi: {
+                  select: {
+                     title: true
+                  }
+               }
+            }
+         });
+
+
+         dataFix = data.map((v: any) => ({
+            ..._.omit(v, ["Investasi", "StatusInvoice"]),
+            title: v.Investasi.title,
+            statusInvoice: v.StatusInvoice.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/investasi/main/saham_saya/page.tsx

@@ -1,13 +1,13 @@
-import { investasi_funGetSuccessTransactionById } from "@/app_modules/investasi/_fun";
-import { Investasi_UiSahamSaya } from "@/app_modules/investasi/_ui";
+import { Investasi_ViewSahamSayaNew } from "@/app_modules/investasi/_view/main/view_saham_saya_new";
 
 export default async function Page() {
-  const dataSaham = await investasi_funGetSuccessTransactionById({ page: 1 });
+  // const dataSaham = await investasi_funGetSuccessTransactionById({ page: 1 });
 
   return (
     <>
       {/* <InvestasiSahamTerbeli listTransaksi={listTransaksi as any} /> */}
-      <Investasi_UiSahamSaya dataSaham={dataSaham as any} />
+      {/* <Investasi_UiSahamSaya dataSaham={dataSaham as any} /> */}
+      <Investasi_ViewSahamSayaNew />
     </>
   );
 }

src/app/dev/investasi/main/transaksi/page.tsx

@@ -4,6 +4,7 @@ import getMaster_StatusTransaksiInvestasi from "@/app_modules/investasi/fun/mast
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { investasi_funGetTransaksiByUserId } from "@/app_modules/investasi/_fun";
 import { Investasi_UiDaftarTransaksi } from "@/app_modules/investasi/_ui";
+import { Investasi_ViewDaftarTransaksiNew } from "@/app_modules/investasi/_view/main/view_transaksi_new";
 
 export default async function Page() {
   const userLoginId = await funGetUserIdByToken();
@@ -22,7 +23,8 @@ export default async function Page() {
         statusTransaksi={statusTransaksi as any}
         listTransaksi={listTransaksi as any}
       /> */}
-      <Investasi_UiDaftarTransaksi dataTransaksi={dataTransaksi} />
+      {/* <Investasi_UiDaftarTransaksi dataTransaksi={dataTransaksi} /> */}
+      <Investasi_ViewDaftarTransaksiNew/>
     </>
   );
 }

src/app_modules/investasi/_component/main/comp_card_daftar_transaksi_new.tsx

@@ -0,0 +1,94 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { Card, Group, Stack, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { IDataSahamSaya } from "../../_lib/type_investasi";
+
+export function Investasi_ComponentCardDaftarTransaksiNew({ data }: { data: IDataSahamSaya; }) {
+   const router = useRouter();
+
+   async function onClick({ invoiceId, statusInvoiceId, }: { invoiceId: string; statusInvoiceId: string; }) {
+      // Berhasil
+      if (statusInvoiceId === "1") {
+         return router.push(NEW_RouterInvestasi.transaksi_berhasil + invoiceId, {
+            scroll: false,
+         });
+      }
+
+      // Proses
+      if (statusInvoiceId === "2") {
+         return router.push(NEW_RouterInvestasi.proses_transaksi + invoiceId, {
+            scroll: false,
+         });
+      }
+
+      // Menunggu
+      if (statusInvoiceId === "3") {
+         return router.push(NEW_RouterInvestasi.invoice + invoiceId, {
+            scroll: false,
+         });
+      }
+
+      if (statusInvoiceId === "4") {
+         return router.push(NEW_RouterInvestasi.transaksi_gagal + invoiceId, {
+            scroll: false,
+         });
+      }
+      ComponentGlobal_NotifikasiPeringatan("Status Belum Tersedia");
+   }
+
+
+
+   return (
+      <>
+         <Card
+            style={{
+               padding: "15px",
+               backgroundColor: AccentColor.darkblue,
+               border: `2px solid ${AccentColor.blue}`,
+               borderRadius: "10px",
+               color: "white",
+            }}
+            mb={"md"}
+            onClick={() =>
+               onClick({
+                  invoiceId: data.id,
+                  statusInvoiceId: data.statusInvoiceId,
+               })
+            }
+         >
+            <Group position="apart">
+               <Text fw={"bold"}>{data.title}</Text>
+               <Text fw={"bold"}>
+                  Rp.
+                  {new Intl.NumberFormat("id-ID", {
+                     maximumFractionDigits: 10,
+                  }).format(+data.nominal)}
+               </Text>
+            </Group>
+            <Group position="apart">
+               <Stack spacing={0}>
+                  <Text fz={"xs"} c={"gray"}>
+                     {new Intl.DateTimeFormat("id-ID", { dateStyle: "long" }).format(new Date(data.createdAt))}
+                  </Text>
+               </Stack>
+               <Title
+                  order={6}
+                  c={
+                     data.statusInvoiceId === "1"
+                        ? "green"
+                        : data.statusInvoiceId === "2"
+                           ? "blue"
+                           : data.statusInvoiceId === "3"
+                              ? "orange"
+                              : "red"
+                  }
+               >
+                  {data.statusInvoice}
+               </Title>
+            </Group>
+         </Card>
+      </>
+   );
+}

src/app_modules/investasi/_component/main/comp_card_saham_saya_new.tsx

@@ -0,0 +1,66 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_TampilanAngkaRatusan, ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
+import { Box, Progress, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { IDataSahamSaya } from "../../_lib/type_investasi";
+import { Investasi_ComponentStylesCard } from "../comp_card_border_and_background";
+
+export function Investasi_ComponentSahamSayaNew({ data }: { data: IDataSahamSaya; }) {
+   const router = useRouter();
+
+   return (
+      <>
+         <Investasi_ComponentStylesCard
+            onClickHandler={() => {
+               router.push(NEW_RouterInvestasi.detail_saham + data?.id, {
+                  scroll: false,
+               });
+            }}
+            marginBottom={"15px"}
+         >
+            <SimpleGrid cols={2} spacing={"xs"}>
+               <Box>
+                  <Stack spacing={0}>
+                     <Text fw={"bold"} lineClamp={2}>
+                        {data?.title}
+                     </Text>
+                     <ComponentGlobal_TampilanRupiah
+                        nominal={+data?.nominal}
+                        color="white"
+                        fontSize={"xs"}
+                     />
+                     <ComponentGlobal_TampilanAngkaRatusan
+                        nominal={+data?.lembarTerbeli}
+                        color="white"
+                        fontSize={"xs"}
+                        textAfter="Lembar"
+                     />
+                  </Stack>
+               </Box>
+
+               <Stack justify="center">
+                  <Progress
+                     size={"xl"}
+                     radius={"xl"}
+                     color="yellow"
+                     value={+data.progress}
+                     label={data.progress + "%"}
+                     styles={{
+                        bar: {
+                           backgroundColor: MainColor.yellow,
+                        },
+                        root: {
+                           backgroundColor: "whitesmoke",
+                        },
+                        label: {
+                           color: "black",
+                        },
+                     }}
+                  />
+               </Stack>
+            </SimpleGrid>
+         </Investasi_ComponentStylesCard>
+      </>
+   );
+}

src/app_modules/investasi/_lib/api_interface.ts

@@ -11,4 +11,9 @@ export const apiGetOneInvestasiById = async (path: string) => {
 export const apiGetAllInvestasi = async (path?: string) => {
    const response = await fetch(`/api/new/investasi${(path) ? path : ''}`)
    return await response.json().catch(() => null)
+}
+
+export const apiGetAllSahamSaya = async (path?: string) => {
+   const response = await fetch(`/api/new/investasi/invoice${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
 }

src/app_modules/investasi/_lib/type_investasi.ts

@@ -23,4 +23,15 @@ export interface IDataInvestasiBursa {
    targetDana: string
    pencarianInvestor: string
    updatedAt: Date
+}
+
+export interface IDataSahamSaya {
+   id: string
+   nominal: string
+   lembarTerbeli: string
+   statusInvoiceId: string
+   createdAt: Date
+   statusInvoice: string
+   title: string
+   progress: string
 }

src/app_modules/investasi/_view/main/skeleton_saham_saya.tsx

@@ -0,0 +1,18 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Grid, Skeleton } from "@mantine/core";
+
+export default function SkeletonInvestasiSahamSaya() {
+   return (
+      <>
+         {[...Array(4)].map((_, index) => (
+            <ComponentGlobal_CardStyles key={index}>
+               <Grid>
+                  <Grid.Col span={12}>
+                     <Skeleton w={"100%"} height={70} radius="md" />
+                  </Grid.Col>
+               </Grid>
+            </ComponentGlobal_CardStyles>
+         ))}
+      </>
+   );
+}

src/app_modules/investasi/_view/main/view_saham_saya_new.tsx

@@ -0,0 +1,73 @@
+'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 { Investasi_ComponentSahamSayaNew } from "../../_component/main/comp_card_saham_saya_new";
+import { apiGetAllSahamSaya } from "../../_lib/api_interface";
+import { IDataSahamSaya } from "../../_lib/type_investasi";
+import SkeletonInvestasiSahamSaya from "./skeleton_saham_saya";
+
+export function Investasi_ViewSahamSayaNew() {
+   const [data, setData] = useState<IDataSahamSaya[]>([]);
+   const [activePage, setActivePage] = useState(1);
+   const [loading, setLoading] = useState(true)
+
+
+   async function getDataSahamSaya() {
+      try {
+         setLoading(true)
+         const response = await apiGetAllSahamSaya(`?cat=saham-saya&page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getDataSahamSaya()
+   }, []);
+
+   return (
+      <>
+         <Box>
+            {
+               loading ?
+                  <SkeletonInvestasiSahamSaya />
+                  :
+                  _.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 apiGetAllSahamSaya(`?cat=saham-saya&page=${pageNew}`)
+                           setActivePage((val) => val + 1);
+
+                           return loadData.data;
+                        }}
+                     >
+                        {(item) => <Investasi_ComponentSahamSayaNew data={item} />}
+                     </ScrollOnly>
+                  )
+            }
+         </Box>
+      </>
+   );
+}

src/app_modules/investasi/_view/main/view_transaksi_new.tsx

@@ -0,0 +1,72 @@
+'use client'
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { Box, Center, Loader } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { Investasi_ComponentCardDaftarTransaksiNew } from "../../_component/main/comp_card_daftar_transaksi_new";
+import { apiGetAllSahamSaya } from "../../_lib/api_interface";
+import { IDataSahamSaya } from "../../_lib/type_investasi";
+import SkeletonInvestasiSahamSaya from "./skeleton_saham_saya";
+
+export function Investasi_ViewDaftarTransaksiNew() {
+   const [data, setData] = useState<IDataSahamSaya[]>([]);
+   const [activePage, setActivePage] = useState(1);
+   const [loading, setLoading] = useState(true)
+
+
+   async function getDataTransaksi() {
+      try {
+         setLoading(true)
+         const response = await apiGetAllSahamSaya(`?cat=transaksi&page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getDataTransaksi()
+   }, []);
+
+   return (
+      <>
+         {
+            loading ?
+               <SkeletonInvestasiSahamSaya />
+               :
+               _.isEmpty(data) ? (
+                  <ComponentGlobal_IsEmptyData />
+               ) : (
+                  <Box>
+                     <ScrollOnly
+                        height="82vh"
+                        renderLoading={() => (
+                           <Center mt={"lg"}>
+                              <Loader color={"yellow"} />
+                           </Center>
+                        )}
+                        data={data}
+                        setData={setData}
+                        moreData={async () => {
+                           const pageNew = activePage + 1
+                           const loadData = await apiGetAllSahamSaya(`?cat=transaksi&page=${pageNew}`)
+                           setActivePage((val) => val + 1);
+
+                           return loadData.data;
+                        }}
+                     >
+                        {(item) => <Investasi_ComponentCardDaftarTransaksiNew data={item} />}
+                     </ScrollOnly>
+                  </Box>
+               )
+         }
+      </>
+   );
+}